parallax / _notes.md — FINAL (7 of 7 sites complete)
Engine note: each entry is a SCROLL-MOTION PATTERN, not a single frame.
These prototypes are scroll-driven sequences — the numbered images are frames of a
few effects, not distinct layouts. Files run 1.png -> N.png in scroll order.
Deploy = "use this motion when...", not "copy this screen."
parallax/porsche/ (1-18) — Scroll-Scrubbed Product Cinematic (luxury automotive)
A single hero product (gold 911) is the persistent environment; the whole page is one continuous scroll-scrubbed camera move, not stacked sections. Motion beats: (1) car on a slow turntable with a text-break headline ("Feel Luxurious, Feel Porsche.") - type sits behind/around the vehicle in layered depth; (2) scroll drives a zoom into a spec-card section - oversized outline wordmark ("PORSCHE 911") with stat cards (476mi / 2.19s / 220mph / 1,020hp) resolving into place; (3) a street-scene parallax layer ("LUXURY") with a glass copy card floating over it. Deploy: high-ticket physical products (cars, watches, real estate) where the hero must stay on-screen and the page is one cinematic descent. Camera moves, content doesn't scroll past.
parallax/coffeecup/ (1-4) — Assemble / Disassemble Product Animation on a Device Screen (mobile app intro)
Effect lives inside a phone mockup. As you scroll, the product comes apart and reassembles: the cup lid lifts off and beans + a coffee splash erupt upward out of the cup, then settle back. Warm cream bg, navy lid, oversized serif "COFFEE", "Get Started" pill CTA. Deploy: app-launch / single-product pages where showing the product explode into its parts is the wow moment. Works for food, cosmetics, hardware unboxing.
parallax/juicyfresh/ (1-18) — Color-Sweep Section Transition with Rising Product Podiums (impulse beverage)
High-energy. Two linked effects: (1) cans rise onto concrete podiums from below the fold, sliding up behind a giant headline ("+ ENERGY") so type and product interlock in depth; (2) a torn-paper-edge color band sweeps vertically as the section background hard-shifts palette (orange -> pink -> navy) - the rip edge is the transition device, never a hard cut. Also a two-can tilted "REFRESHING" layout with a "Try It" pill, and a drop/cluster arrangement of all four flavor cans. Deploy: fast, punchy, low-price impulse products (soda, snacks, Gen-Z brands). Use the torn-edge color sweep anywhere you'd otherwise hard-cut between sections.
parallax/colgate/ (1-7) — Brand-Tile Wipe Intro into Text-Breaking Bento Hero (mass retail)
Two beats: (1) a full-bleed red logo screen (Colgate wordmark centered) acts as an intro/ loading curtain that wipes away on scroll; (2) the red brand square scales/expands across the hero on entry as a transition mask. Settled state = a text-breaking editorial hero ("YOUR SMILE IS YOUR SUPERPOWER") with a smile image nested inside the headline, plus a bento of cards below (image card, product card, "How can we help" dark card). Deploy: big established brands that want a confident logo-first intro. The brand-color tile doubles as both loading screen and section-transition wipe.
parallax/chanel/ (1-16) — Scroll-Zoom into Hero Product + Editorial Carousel (prestige / luxury)
Black/gold, thin Helvetica-style type, restrained. Beats: (1) a centered word-reveal moment ("Unmatched Elegance") - large text scales up on pure black; (2) a horizontal product-image carousel/slider - prev/next circular arrows, dot indicators, 3-up image strip; (3) a scroll-driven zoom that pushes the camera INTO the diffuser hero until the gold CC logo and glow-ring fill the frame. Settled states: "Experience the Essence of Elegance" hero with Buy CTA + side description, and "Tailored Scent Experience / Features" with circular feature icons. Deploy: prestige / understated-luxury products. Slow, quiet motion - zoom and reveal, no bounce. The product is lit like a jewel against black; type stays minimal.
parallax/salsaretti/ (1-11) — Lid-Lift Ingredient-Drop Hero with Foreground Botanical Parallax (light-theme food / CPG)
Clean white / off-white airy bg; a single sauce jar is the persistent centerpiece. Motion beats: (1) the jar lid detaches and lifts off while fresh tomato slices tumble down into the open jar - the product "opening to receive its ingredients" is the wow; (2) the headline ("THE BEST CHOOSE FOR YOU") mask-reveals in and scrolls back out while the jar holds frame; (3) blurred basil leaves drift across the foreground at varied depths/speeds, with a side copy block + "READ MORE" pill fading in. Settles into a product-detail / shop layout (title, struck-through price -> sale price, quantity stepper, flavor carousel). Deploy: light, clean, appetite-driven food / CPG products on white - where showing the product open up and take in its fresh ingredients is the hero moment. Foreground blurred botanicals add depth without layout clutter; keep the jar pinned through the sequence.
parallax/wine bottle/ (1-25) — Counter-Scrolling Type Layers around a Scrubbed Hero Object (dark prestige / luxury)
Near-black bg, restrained palette of deep red + white. A horizontal wine bottle is the persistent scrubbed object - it rotates/translates across the viewport as scroll drives the sequence. Motion beats: (1) the bottle sits in a z-sandwich between solid filled display type ("WINE", "LEAVING A MARK IN THE INDUSTRY") and white outline "ghost" type ("THE BEST TASTE") that scroll past at different rates, building depth; (2) ambient fruit (apples, grapes, mango) drifts as a parallax layer at varied depths; (3) B&W cellar/barrel story-image cards slide in between text beats while serif body copy crosses behind the bottle. Settled states: nav hero with "BUY NOW" CTA + socials, vertical "SINCE 1960 PRODUCING NON-STOP" type stack. Deploy: dark, premium, editorial single-hero products (wine, spirits, fragrance) where the hero object stays pinned and type slides past it at multiple depths. Use the filled-vs-outline type pair as the core depth device; ambient object drift fills negative space without clutter.
STATUS — section complete
- Sites complete: 7 (porsche, coffeecup, juicyfresh, colgate, chanel, salsaretti, wine bottle)
- The parallax section of the visual-pattern library is finalized.
= 99 frames total, all sorted into subfolders and renamed 1.png -> N.png in scroll order.