Style: Chroma Showcase (v1.1)

Direction

A single product on a saturated full-bleed stage, in front of a giant word. The stage color is the product variant, so switching the colorway changes the whole room. The product is a crisp photographic cutout floating in front of a massive condensed wordmark, and the UI around it is small, white, and sporty, like a sneaker drop page. Motion is the point: the product flies in, floats, and swaps with a choreographed slide while the stage color morphs.

Assets (mandatory)

Product images come from assets/ as transparent PNG cutouts, one per variant, all in the identical pose, angle, scale, and lighting so a swap reads as the same object changing color. Never draw the product in code. Code draws only UI, the stage, the wordmark, and shadows.

Tokens

Stage colors (per variant). Each variant defines base (edges, where text sits) and glow (center light):

• Stage background: radial-gradient(ellipse 60% 70% at 55% 48%, glow 0%, base 70%). This radial glow is the only gradient in the style.
• The page outside the stage (when the stage is shown as a framed card on large screens) is the base color mixed 55% with white.
• New variants must keep white on base ≥ 4.5:1 and white on glow ≥ 3:1.

Ink on stage

Type

• Wordmark: "Anton" (Google Fonts), uppercase, font-size: clamp(120px, 22vw, 360px), line-height 0.82, letter-spacing -0.01em, white.
• UI labels and nav: "Barlow Condensed" 600, uppercase, letter-spacing 0.04em, 14 to 15px.
• Product name: "Barlow Condensed" 400, uppercase, 34px. Price: "Barlow" 700, 52px, tabular figures.
• Body: "Barlow" 400, 15px/1.55, on-stage-soft, max 300px. Wherever body copy sits on the glow fall-off (not plain base), use full on-stage white, because on-stage-soft measures only ~4.3:1 there.

Shape

• Stage: full-bleed on mobile; on screens ≥ 1280px a card with 36px radius inset 48px from the viewport, with a soft shadow 0 40px 80px -20px rgba(0,0,0,.35).
• Option chips: 44×40px squares, 1px on-stage-line border, 4px radius; selected = solid white with base-colored text.
• Color swatches: 30px circles filled with each variant's base with a 1px on-stage-line inner outline (so the current color's dot stays visible on its own stage); selected gets a 2px white ring at 4px offset.
• Primary button: white pill, 52px tall, ~300px wide, button-ink 600 uppercase "Barlow Condensed" 16px, with a "+".
• Round arrow buttons: 56px circles, 1px on-stage-line border, white arrow icons.

Layout (desktop)

• Nav row at the top: logo mark left, 5 uppercase links centered, icon buttons right (search, bag with a count badge, account).
• The wordmark sits centered, slightly above the vertical middle. The product overlaps it from the right-center, rotated about -20°, tall enough to cover 2 to 3 letters, in front of the wordmark.
• Left column (~300px): product name, price, an option grid with label, swatches with label, primary button. All of it sits on the base edge of the stage, never over the glow.
• Bottom center: a "Play video" text button with a small round play icon. Right column bottom: a 4 to 5 line description and the prev/next arrow pair.

Product presentation

• Drop shadow under the product: filter: drop-shadow(0 40px 40px rgba(0,0,0,.35)) plus a soft elliptical contact shadow on the stage (blurred div, base color darkened 30%).
• The product is in front of the wordmark; while a product is leaving the stage it passes in front of the left column too.

Motion (the core of this style)

Easing: cubic-bezier(0.22, 1, 0.36, 1) (out-quint) for entrances, cubic-bezier(0.55, 0, 0.75, 0) for exits.

1. Intro (on load): stage color and wordmark are visible at 0ms (wordmark scales 1.06 → 1 over 700ms). The product flies in from the top-right off-stage (translate +40vw, -30vh, rotate +25°) to its resting pose over 900ms, starting at 250ms, with a small settle (overshoot ~2°). The left column, description, and controls fade + rise 12px with a 60ms stagger, starting at 600ms.
2. Idle float: the product drifts ±8px vertically and ±1.2° in rotation over 5s, ease-in-out, infinite; its contact shadow scales in sync (smaller when the product is higher).
3. Variant switch (swatch click, arrow buttons, ←/→ keys, or autoplay):
   • Stage color interpolates from the old to the new base/glow over 800ms (animate the two colors in JS or with registered CSS custom properties; never a hard cut).
   • Outgoing product exits to the left and slightly up (translate -55vw, -8vh, rotate -15°, scale 0.9) over 650ms with the exit easing.
   • Incoming product enters from the right edge (translate +55vw, +4vh, rotate +18°) to the resting pose over 800ms, starting 180ms after the exit begins, with the entrance easing and a small settle.
   • The outgoing product fades out over the second half of its exit and the incoming one fades in over the first ~20% of its entrance, so neither pops at the stage edge. The contact shadow shrinks and fades during the swap and recovers with the new product.
   • Product name and price roll: old text slides up 100% and fades, new text rises from 100% below, 450ms, price 60ms after the name.
   • Selected swatch ring and selected chip states move with a 200ms transition. The wordmark never moves during a switch.
   • Direction follows navigation: "previous" mirrors every motion.
4. Autoplay: advance every 5.5s; pause while the pointer is over the stage, while anything inside has focus, after any user interaction (resume after 10s idle), and when the tab is hidden.
5. Pointer parallax (pointer devices only): product follows the pointer by up to 14px, the wordmark moves up to 6px the opposite way, lerp 0.08.
6. Reduced motion: no fly-in, float, parallax, or autoplay; variant switches cross-fade the product and stage color in 200ms. Implementation: transforms and opacity only; preload every variant image before the intro starts; above-the-fold content visible within 1s of load.

Copy voice

Short, confident, product-proud. Uppercase labels. One sensory sentence of description; numbers for specs.

Never

• Real brands, logos, or product names (no swooshes, jumpmen, or look-alikes); the logo mark is an original simple glyph
• More than one product on stage at rest
• Small text over the glow center, or any text below 4.5:1
• Stage colors that are pastel or desaturated; neon; multiple gradients; glassmorphism
• Inter, Roboto, Arial, or system fonts as the visible font
• Product images with different poses between variants, visible cutout halos, or baked-in backgrounds
• Hard color cuts between variants
• Phrases like "unleash", "game-changer", "next level", "revolutionary"

Video (launch reels)

For rendered videos (Remotion) in this style. Everything above still applies; these rules add the time dimension.

• Format: 1080×1920 (9:16) at 30 fps for Reels / TikTok / Shorts. Optional 1080×1350 (4:5) and 1920×1080 (16:9) compositions reuse the same scenes with re-laid-out positions, never a crop.
• Safe zones (9:16): keep all text and the price inside x 90 to 990, y 260 to 1500. The top 220 px and bottom 380 px are covered by platform UI.
• Beats: cut or change on a beat every 0.75 to 1.5 s; never hold a static frame longer than 1.5 s except the end card (≥ 1 s hold).
• Drive everything from the frame: useCurrentFrame() + interpolate() / spring() only (no CSS transitions, no Date.now(), no randomness without a fixed seed), so every render is identical.
• Springs: entrances spring({ fps, frame, config: { damping: 14, stiffness: 120, mass: 0.9 } }); slams damping: 9, stiffness: 180; settles never overshoot more than ~4%.
• Color wipes between variants: an expanding circle of the next stage color from the selected swatch's position, radius 0 → hypot(width, height) over 14 frames with out-quint easing; the outgoing product exits under the wipe, the incoming one enters on top of it.
• Minimum text size: on a 1080 px-wide frame, nothing smaller than 40 px (≈ 14 px on a phone); labels, chips, and swatch names 40 to 48 px; secondary end-card lines ≥ 48 px. Video is watched small and fast.
• Kinetic type: words enter one by one on 3-frame staggers, rising from a mask (translateY 100% → 0), Barlow Condensed 600 uppercase; maximum 4 words on screen at once; every line stays on screen at least 0.6 s.
• Motion blur: for fast moves, add 2 to 3 trailing copies at 15 to 25% opacity offset along the motion path (or @remotion/motion-blur <Trail>); never on text.
• Camera: a subtle continuous push-in (scale 1 → 1.04 per scene) keeps static moments alive.
• Audio: no sound is shipped. Mark beats in beats.json (frame numbers) so buyers can sync music.
• Never: jump cuts without a beat, text outside the safe zone, flicker (any element popping in for 1 to 2 frames), stretched images, more than one wipe per second.