Skip to content

abbasmir12/epic-design-showcase

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

Epic Design Showcase

The problem with AI-generated websites: They're flat, generic, and forgettable.

Most AI coding tools build functional websites — but they lack soul. You get working HTML, proper semantics, responsive layouts... and zero emotional impact. Every site feels the same: static sections, basic transitions, predictable layouts.

This changes now.


What You're Looking At

This isn't another AI-generated template. This is what happens when AI has domain expertise — when it understands cinematic design, scroll storytelling, and the psychology of depth.

Built using the epic-design skill from the claude-skills repository — an open-source collection of production-ready skills maintained by the community.

What Makes This Different

Generic AI sites:

  • Flat, static sections
  • Basic fade-in animations
  • No depth or spatial awareness
  • Feels like a template

Epic Design sites:

  • 6-layer depth system with real parallax
  • Scroll-driven storytelling
  • Cinematic text animations (13 techniques)
  • Apple/Awwwards-level polish
  • Feels handcrafted by a senior designer

The Technology

No WebGL. No Frameworks. Just Web Standards.

  • Pure CSS + JavaScript — 45+ animation techniques
  • GSAP ScrollTrigger — industry-standard scroll engine
  • WCAG 2.1 AA compliant — reduced-motion, ARIA, semantic HTML
  • Performance optimized — GPU acceleration, will-change management
  • Single HTML file — self-contained, easy to deploy

What's Inside

  • 6-layer depth system (depth-0 to depth-5)
  • Elastic drop entrance with impact shake
  • Ghost outlined background text
  • Word-by-word scroll lighting
  • Scrub timeline (scroll = animation frames)
  • Float loops on all depth layers
  • Mobile-optimized with reduced effects
  • Accessibility built-in from day one

The Epic Design Skill

This site was built by Claude AI using the epic-design skill — part of the claude-skills repository, an open-source library of 177+ production-ready skills for AI coding agents.

Epic-design is a comprehensive instruction package that gives AI the knowledge to build cinematic web experiences.

What the Skill Includes

  • SKILL.md — 45+ techniques across 8 categories
  • 9 reference files — depth system, motion patterns, text animations
  • Asset inspection pipeline — judges when to remove backgrounds vs keep them
  • Python automation — image analysis, validation scripts
  • Production-ready — accessibility, performance, best practices built-in

Before vs After

Before epic-design:

"Build me a landing page" → Generic template with basic animations

After epic-design:

"Build me a landing page" → Inspects assets, assigns depth layers, chooses cinematic techniques, builds with scroll storytelling


Why This Matters

AI is getting better at writing code. But code isn't design.

Design is about:

  • How elements enter and exit
  • The relationship between layers
  • The rhythm of scroll
  • The feeling of depth
  • The moment of delight

Epic design teaches AI to think about these things.

It's not about generating more code — it's about generating better experiences.


Try It Yourself

View the Live Demo

View Demo

Use the Skill

Epic-design is part of the open-source claude-skills repository:

  1. Get the skill: epic-design in claude-skills
  2. Install: Follow the installation guide
  3. Use with: Claude Code, Cursor, Aider, Windsurf, or any AI coding tool
  4. Provide product assets — PNG images with transparent backgrounds work best
  5. Build cinematic websites in minutes, not hours

Pro tip: The skill includes an asset inspection pipeline that analyzes your images and recommends depth assignments. For best results, provide:

  • Product images (bottles, devices, objects) as transparent PNGs
  • Multiple assets at different sizes for compositional hierarchy
  • Background images or textures for depth-0 layer

The AI will inspect each asset, judge whether backgrounds need removal, and assign optimal depth levels automatically.

What You Can Build

  • Product launch pages
  • Portfolio sites
  • SaaS marketing pages
  • Event landing pages
  • Brand experiences
  • Hero sections that actually convert

The Future of AI Design

This is just the beginning.

Right now, AI can write code. Soon, with skills like epic-design, AI will craft experiences.

The difference between a developer and a designer isn't the tools — it's the taste, judgment, and domain knowledge.

Skills give AI that knowledge.


Credits

Skill: epic-design from claude-skills
Showcase built by: Abbas Mir
Showcase repository: epic-design-showcase
Main repository: claude-skills (177+ skills, 4.8k+ stars)


The era of generic AI websites is over.
Welcome to epic design.

About

Live Demo of epic-design Skill - Cinematic 2.5D web experience with scroll storytelling, parallax depth & premium animations pure Css/JS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages