Skip to content
Get packs

Epic Design (Cinematic Scroll Sites)

Builds scroll-driven, cinematic 2.5D web pages from flat images using CSS and JavaScript, without WebGL.

Source Download skill
Repository
alirezarezvani/claude-skills
Stars
29,149
Licence
MIT
Files
12 files

What it does

When installed, the agent approaches web design tasks with a cinematic scroll-storytelling mindset: it inspects your image files, decides which need their backgrounds removed, plans a visual hierarchy of hero and companion images at different depths, and then builds pages with parallax, text reveals, pinned sections and similar effects. It works with flat PNG or JPEG assets and plain CSS/JavaScript rather than 3D software. It also includes a helper script that checks image files and a validator that checks a page's HTML for accessibility and performance basics.

Great for

  • Designers or developers who want a landing page or product hero with Apple-style scroll effects
  • Marketers building a product launch page from existing flat product photos
  • Teams enhancing an existing static website with parallax or scroll animation

Skip it if

  • Projects that need real 3D or WebGL scenes, since the skill explicitly avoids them
  • Sites where motion must be minimal for users with vestibular disorders unless reduced-motion handling is checked carefully, because the skill is tuned for heavy animation
  • Users who expect the skill to edit production code without review, since it generates effects that need testing across devices

Try asking

  • “Build a cinematic landing page for my new sneaker launch using these three product PNGs”
  • “Make this existing product page feel alive with parallax and sections that overlap”
  • “Check my index.html for reduced-motion support and too many animated elements”
  • “Inspect these uploaded images and tell me which need background removal”
Step-by-step guide: how to use Epic Design (Cinematic Scroll Sites)Install, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 12 original files, the MIT licence and an attribution note.

    epic-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip epic-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip epic-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide clear, high-resolution flat images and state the mood (dark, bright, luxury) so the agent can choose depth and effects.
  • Ask for Mode 2 (enhance existing site) when you already have a page, so the agent keeps your current structure.
  • Test the output on mobile and with reduced-motion enabled before publishing, and run the validator script on the HTML.

What's inside

  • references/accessibility.md
  • references/asset-pipeline.md
  • references/depth-system.md
  • references/directional-reveals.md
  • references/examples.md
  • references/inter-section-effects.md
  • references/motion-system.md
  • references/performance.md
  • references/text-animations.md
  • scripts/inspect-assets.py
  • scripts/validate-layers.js
  • SKILL.md

Redistributed unmodified from alirezarezvani/claude-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.