Assemble immersive pages from nine motion-aware backbone sections and a searchable 181-section library while keeping pinned scroll travel reachable.
Where: Designer assistant on a landing/web page → list_kit_sections or insert_kit_section.
Key ideas
- Nine authored backbone sections: Pinned Hero, Scroll Video Hero, Kinetic Manifesto, Sticky Stack, Object 3D Mouse, Product Reveal, Object 3D Scroll, Horizontal Gallery, and Cinematic Closing arrive with coordinated markup, stylesheet, motion beats, slot maps, and interaction rules.
- A searchable supporting library: The v3 library contains 181 designed sections across hero, features, pricing, FAQ, forms, testimonials, logos, navigation, commerce, content, scroll stories, and many other categories. The assistant receives a compact category map and uses list_kit_sections to inspect exact entries before inserting one.
- Scroll travel is a finite budget: Pinned sections require enough normal page flow after them to complete. The kit estimates flow screens and warns when a pin is last or asks for more travel than the following sections can provide. The cinematic closing is intentionally unpinned.
Steps
- Choose an art direction and outline the page’s narrative before selecting sections.
- Use four to six sections for a focused immersive page. Start with the nine hand-built sections for the opening, held scene, central object, or closing.
- Call list_kit_sections when you need a conventional section such as pricing, FAQ, social proof, forms, or a specialized scroll story. Filter by category, words, or scroll-only.
- Insert sections in reading order. Pass text_json for real copy and media_json for project assets instead of shipping placeholder content.
- Inspect the returned slot and element IDs, then rebrand with the selected direction’s tokens, crops, and type rules.
- Check pin budget and page review. Move a pin earlier or add meaningful following content if the runtime would have to clamp its travel.
Backbone order and purpose
- Pinned Hero — a held opening scene.
- Scroll Video Hero — a film scrubbed by the reader’s progress.
- Kinetic Manifesto — a fast typographic statement.
- Sticky Stack — layered story progression in one held frame.
- Object 3D Mouse — one object responding to the pointer.
- Product Reveal — a focused non-3D product moment.
- Object 3D Scroll — object motion controlled by scroll.
- Horizontal Gallery — a range moving sideways.
- Cinematic Closing — an unpinned landing and call to action.
Library lookup and insertion
- Library ids are prefixed v3: and must come from list_kit_sections.
- Browse results include summary, layout, tone, slots, whether motion follows scroll, estimated flow, and pin distance.
- insert_kit_section performs one undoable insertion and returns minted element ids.
- Text and media are supplied through named slots; unknown URLs should never be invented to fill a media slot.
Tips
- Avoid placing both 3D backbone sections adjacent to each other or directly after the hero; consecutive WebGL-heavy scenes reduce contrast and can stutter.
- Use library sections for familiar structures and spend custom composition effort on the brand-defining moments.
Limitations and important notes
- A kit section is a starting composition, not finished brand work. Placeholder copy or default gradients must be replaced deliberately.
- The pin budget is a conservative estimate; verify real scroll behavior in Preview and at the target viewport sizes.
- Media slots accept usable project URLs. Local paths or expiring inaccessible links will not survive sharing/export.
Troubleshooting
A pinned story ends too quickly or traps the last call to action.
Move the pin earlier, add meaningful unpinned flow after it, or shorten the requested travel. Never finish the page with a pinned section.
The assistant invents a v3 section id.
Browse with list_kit_sections and pass one of the returned ids. The compact prompt contains only category samples, not the full library.