Build motion site workflows from repeatable recipes.

# Motion Site Build Brief

Project: Motion Site Plan
Client / use case: Campaign, cannabis, product, or local service client
Updated: 6/11/2026, 12:00:00 AM

## Assembly Layers
- Video Background: BG-01 Looped Video Background
- Intro / Loader: TBD
- Hero: H-09 Nature Organic Hero
- Scroll Trigger: SCR-01 Pinned ScrollTrigger Scene
- Content Sections: TBD
- Proof: S-02 Scroll Marquee
- GSAP / Interaction: GSAP-01 Split Text Reveal
- SVG Motion: SVG-01 SVG Line Draw
- Motion Media: TBD
- Conversion: S-03 Liquid Glass CTA
- Footer: TBD

## Selected Motion Recipes
### S-02 Scroll Marquee
- Type: section
- Elementor: Easy
- Priority: #1 - Fast reusable strip for sponsors, partners, proof, and service loops.
- Structure: Infinite horizontal strips for logos, services, words, sponsor names, images, or proof phrases.
- Motion: Constant or scroll-speed-linked marquee with dual rows moving opposite directions.
- Tags: marquee, logos, sponsors, css, proof
- Checklist:
  - [ ] Eyeball live references and define an original structure
  - [ ] Prep media, renders, copy, logos, and color direction
  - [ ] Build the Elementor section structure
  - [ ] Add Motion.page or GSAP animation pass
  - [ ] QA desktop, tablet, mobile, and reduced-motion behavior
  - [ ] Export recipe notes, selectors, and client build checklist

### H-09 Nature Organic Hero
- Type: hero
- Elementor: Easy
- Priority: #2 - Strong default hero for cannabis, wellness, botanical, and organic brands.
- Structure: Botanical imagery or video, earthy palette, soft headline system, and layered foliage at the viewport edges.
- Motion: Foliage parallax, slow drift, and soft scroll reveals.
- Tags: organic, cannabis, wellness, botanical, parallax
- Checklist:
  - [ ] Eyeball live references and define an original structure
  - [ ] Prep media, renders, copy, logos, and color direction
  - [ ] Build the Elementor section structure
  - [ ] Add Motion.page or GSAP animation pass
  - [ ] QA desktop, tablet, mobile, and reduced-motion behavior
  - [ ] Export recipe notes, selectors, and client build checklist

### S-03 Liquid Glass CTA
- Type: section
- Elementor: Easy
- Priority: #3 - Universal closer section for nearly every motion site build.
- Structure: Full-width closer band with luminous depth, focused headline, compact proof, and one primary CTA.
- Motion: Subtle ambient drift, panel entrance, and CTA hover light.
- Tags: cta, closer, glass, conversion, universal
- Checklist:
  - [ ] Eyeball live references and define an original structure
  - [ ] Prep media, renders, copy, logos, and color direction
  - [ ] Build the Elementor section structure
  - [ ] Add Motion.page or GSAP animation pass
  - [ ] QA desktop, tablet, mobile, and reduced-motion behavior
  - [ ] Export recipe notes, selectors, and client build checklist

## Motion Modules
### BG-01 Looped Video Background
- Type: background
- Summary: Muted, cropped, looping video layer with overlay controls for contrast, focal point, and loading strategy.
- Implementation: Use compressed MP4/WebM or hosted video, object-fit cover, poster fallback, reduced-motion still, and a dark or tonal overlay.
- Tags: video, background, poster, overlay

### SCR-01 Pinned ScrollTrigger Scene
- Type: scroll
- Summary: A section pins while text, media, or layers progress through a scrubbed timeline.
- Implementation: Use GSAP ScrollTrigger with pin, scrub, start/end markers during build, and separate mobile fallback timing.
- Tags: scrolltrigger, pin, scrub, gsap

### GSAP-01 Split Text Reveal
- Type: gsap
- Summary: Headline or editorial copy reveals by line, word, or character for strong first-load or scroll moments.
- Implementation: Use GSAP split text workflow or equivalent wrapper spans, staggered y/opacity transforms, and accessible source text.
- Tags: text, reveal, stagger, headline

### SVG-01 SVG Line Draw
- Type: svg
- Summary: Path, logo, icon, connector, or diagram line draws itself on load or as it enters the viewport.
- Implementation: Animate stroke-dasharray and stroke-dashoffset, then lock final state. Avoid animating complex oversized SVGs.
- Tags: svg, path, line, draw

## Build Ingredients
### S-02 Scroll Marquee
- Required: Headline and supporting copy (copy) - Gives the section its message, hierarchy, and animation targets.
- Required: Section layout sketch (design) - Defines where text, media, CTAs, and animated elements sit before production starts.
- Required: Mobile and desktop behavior (technical) - Prevents the motion idea from breaking on phones, tablets, or reduced-motion settings.
- Required: Logo, partner, or proof asset set (asset) - Supplies the repeated trust elements used in the section.

### H-09 Nature Organic Hero
- Required: Headline and supporting copy (copy) - Gives the section its message, hierarchy, and animation targets.
- Required: Section layout sketch (design) - Defines where text, media, CTAs, and animated elements sit before production starts.
- Required: Mobile and desktop behavior (technical) - Prevents the motion idea from breaking on phones, tablets, or reduced-motion settings.
- Required: Primary hero visual (asset) - Creates the main first-screen impact, such as video, photo, render, collage, canvas, or product image.

### S-03 Liquid Glass CTA
- Required: Headline and supporting copy (copy) - Gives the section its message, hierarchy, and animation targets.
- Required: Section layout sketch (design) - Defines where text, media, CTAs, and animated elements sit before production starts.
- Required: Mobile and desktop behavior (technical) - Prevents the motion idea from breaking on phones, tablets, or reduced-motion settings.

### BG-01 Looped Video Background
- Required: 8-12 second seamless background video (media) - Provides the moving visual layer behind the content.
- Required: Poster image fallback (fallback) - Shows while the video loads and for reduced-motion or low-power devices.
- Required: Contrast overlay (design) - Keeps headline and CTA text readable over the video.

### SCR-01 Pinned ScrollTrigger Scene
- Required: 3-5 scroll panels or beats (copy) - Creates the sequence of messages or states that change during the pinned scroll.
- Required: Pinned visual frames or layers (asset) - Gives the scroll scene something visible to transform, reveal, or swap.
- Required: ScrollTrigger start, end, scrub, and pin plan (technical) - Defines exactly how the animation reacts as the visitor scrolls.
- Required: Non-pinned mobile fallback (fallback) - Keeps the story usable on small screens where pinned scroll can feel cramped.

### GSAP-01 Split Text Reveal
- Required: Final headline or text block (copy) - The exact words must be final before splitting into lines, words, or characters.
- Required: Split mode decision (technical) - Defines whether the reveal happens by line, word, character, or a combination.

### SVG-01 SVG Line Draw
- Required: Clean SVG path or logo outline (asset) - The line draw needs simple vector paths with editable strokes.
- Required: Stroke width, color, and end state (design) - Defines how the line appears while drawing and after the animation completes.

## Project Notes
Start by validating the top priority patterns against live previews, then rewrite each recipe into an original build card before production.

## Open Questions
- Which live references have been visually validated?
- Which media assets need AI generation, client sourcing, or cleanup?
- Which sections should be Elementor templates versus one-off builds?
- Which animation details require Motion.page, GSAP, or CSS only?
- Which background, scroll, SVG, and interaction modules should be reused as templates?