Epic Design
Skill Verified ActiveBuild immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
To empower users to create visually stunning, cinematic 2.5D interactive websites with advanced scroll-driven animations, depth effects, and premium visual treatments without requiring WebGL.
Features
- Builds cinematic 2.5D websites
- Leverages scroll storytelling and parallax
- Automated asset inspection and background judgment
- Provides 45+ techniques across 8 categories
- Generates HTML, CSS, and JS code with GSAP integration
Use Cases
- Creating immersive product landing pages
- Designing cinematic hero sections with depth effects
- Implementing advanced scroll animations and parallax
- Enhancing websites with premium visual effects and text animations
Non-Goals
- Building 3D websites using WebGL
- Developing complex web applications beyond visual presentation
- Performing non-visual backend tasks
- Creating basic static websites without animation
Installation
First, add the marketplace
/plugin marketplace add alirezarezvani/claude-skills/plugin install engineering-team@claude-code-skillsQuality Score
VerifiedTrust Signals
Similar Extensions
Baseline Ui
100Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Gsap Utils
100Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
Web Coder
98Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.
GSAP Timeline
98Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).