| name | cinematic-web-experiences |
| description | Build prompts and workflows for premium scroll-driven websites using GSAP ScrollTrigger, Three.js scenes, custom shaders, cinematic loading screens, and responsive motion systems. Use when the user wants a cinematic website, landing page, microsite, or interactive brand experience with scroll storytelling, pinning, parallax, 3D canvas effects, shader-driven visuals, exact animation specs, or a repeatable prompt framework for prompt-based site builders. |
Cinematic Web Experiences
Use this skill to turn a vague "make it premium" request into a concrete build plan or prompt.
Core workflow
- Lock the visual identity before describing motion.
- Choose one stack:
GSAP only, GSAP + Three.js + GLB, or GSAP + Three.js + procedural shaders.
- Define sections top-to-bottom before assigning animations.
- Write exact animation specs with transforms, triggers, and scrub values.
- Declare every asset path and loader explicitly.
- Add a dedicated responsive block at the end.
Non-negotiables
- Use exact hex or
hsl(...) values for colors.
- Pin Three.js when 3D is involved:
three@0.136.0, @types/three@0.136.0.
- Prefer one accent color against a near-black base for premium dark-mode builds.
- Add
overflow-x: hidden to html, body, and #root.
Optional companion dependency
If the user needs new source assets such as images, textures, or looping video backgrounds, pair this workflow with the fal-ai-community/skills repo first to generate the media, then reference the resulting asset paths in the final website prompt.
If the frontend is typography-heavy and exact multiline headline layout matters, optionally pair this workflow with pretext for accurate text measurement and layout.
Read next
- Read
reference.md for the compact playbook.
- Read
../../../shared/cinematic-web-experiences/guide.md for the full canonical guide, prompt template, and project-derived patterns.
