Cinematic Web Experiences

Cinematic Web Experiences

Use this skill when the user wants a site that feels editorial, premium, or cinematic rather than generic.

Quick workflow

1. Define exact visual tokens first.
2. Pick the animation stack before writing the prompt.
3. Design sections from top to bottom.
4. Specify each animation with exact values.
5. Declare asset paths and loaders.
6. Finish with responsive rules.

Required defaults

• Use exact hex or hsl(...) tokens.
• Pin three@0.136.0 and @types/three@0.136.0 for any Three.js build.
• Prefer one accent color on a near-black base unless the user asks otherwise.
• Add overflow-x: hidden on html, body, and #root.

Optional companion dependency

If the user needs fresh media assets such as concept images, textures, or background video loops, use the fal-ai-community/skills repo as a companion workflow to generate them first, then feed the resulting files back into this website workflow.

If the design depends on exact multiline text wrapping, balanced editorial headings, or dynamic text measurement, optionally use pretext alongside this workflow.

Read next

• Read references/guide.md for the Codex-ready condensed reference.
• Read ../../../shared/cinematic-web-experiences/guide.md for the full canonical guide and prompt template.