Epic Design

Epic Design

A Claude Code skill for epic design workflows and automation

Category: design Source: alirezarezvani/claude-skills

What Is Epic Design?

Epic Design is a specialized Claude Code skill engineered to enable the creation of cinematic, immersive, and highly interactive websites without the need for WebGL or advanced 3D modeling. It leverages scroll storytelling, parallax depth, animated text, and premium scroll effects to build engaging 2.5D web experiences using only flat assets, CSS, and JavaScript. The skill is designed to transform static websites into dynamic, visually rich interfaces ideal for landing pages, product showcases, hero sections, and any web project aiming for a premium, "Apple-style" presentation.

By focusing on scroll-driven visual effects and a wide array of animation techniques, Epic Design makes it possible to achieve sophisticated, interactive user experiences that were once the domain of complex frameworks or 3D engines. This approach democratizes high-end web animation, empowering developers and designers to implement cinematic storytelling and motion design with accessible web technologies.

Why Use Epic Design?

Epic Design offers a distinct advantage for teams and individuals seeking to elevate their web design through motion and interaction, all while maintaining high performance and broad compatibility. The key benefits include:

  • No WebGL Dependency: Achieve rich, immersive effects without the complexity or resource intensity of 3D engines or custom shaders.
  • Cinematic Interactivity: Bring a high-end, premium feel to web interfaces, making them more memorable and engaging.
  • Rapid Prototyping: Quickly iterate on scroll-driven animations, parallax effects, and overlapping sections without reinventing the wheel.
  • Versatile Application: Suitable for a wide range of design tasks, from landing pages to complex product microsites.
  • Performance-Friendly: By relying on CSS and JavaScript, Epic Design ensures broad browser support and efficient rendering.

Whether you are building a marketing site, a portfolio, or a product page that needs to stand out, Epic Design provides the tools and workflow to deliver impactful visual storytelling.

How to Get Started

To leverage Epic Design, you can integrate the skill directly into your Claude workflow or reference its patterns and code strategies in your own codebase. Here’s a typical workflow:

  1. Review Context: Always check for any project-context.md or product-context.md documentation to understand project requirements and design intent.
  2. Asset Planning: Inventory and assess static assets (images, SVGs, text blocks) before coding. Sketch out which elements will use which effects.
  3. Trigger the Skill: Use Epic Design for any task involving immersive design, especially when clients request effects like “make it feel alive,” “Apple-style animation,” “product rises between sections,” or “scrollytelling.”
  4. Implement Techniques: Apply chosen techniques from the Epic Design library. The skill covers over 45 techniques across 8 categories.
  5. Iterate: Evaluate the effectiveness of the effects, ensuring they serve the project objectives and user experience.

Example: Parallax Scroll Effect

<section class="parallax-section">
  <img src="foreground.png" class="parallax-foreground" />
  <img src="background.png" class="parallax-background" />
</section>

.parallax-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.parallax-foreground {
  position: absolute;
  top: 0; left: 0; width: 100%;
  transform: translateY(0);
  transition: transform 0.2s cubic-bezier(.25,.46,.45,.94);
  z-index: 2;
}
.parallax-background {
  position: absolute;
  top: 0; left: 0; width: 100%;
  transform: translateY(0);
  z-index: 1;
}

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  document.querySelector('.parallax-foreground').style.transform = 
    `translateY(${scrollY * 0.3}px)`;
  document.querySelector('.parallax-background').style.transform = 
    `translateY(${scrollY * 0.1}px)`;
});

Key Features

Epic Design encapsulates over 45 animation and interaction techniques, grouped into eight major categories:

  • Scroll Storytelling: Trigger animations and content reveals based on scroll position.
  • Parallax Depth: Layer backgrounds and foregrounds with different scroll speeds for immersive depth.
  • Text Animations: Animate text in creative ways, such as sliding, fading, or lighting up on scroll.
  • Sticky Sections and Overlaps: Implement sections that stick, overlap, or float as users scroll.
  • Clip-Path Reveals: Use CSS clip-path to create dramatic element reveals and transitions.
  • Curtain and Iris Effects: Mimic cinematic transitions, such as curtain drops or iris opens.
  • Card Stacks and Floating Products: Layer cards or products for interactive, 2.5D stacking effects.
  • Bleed Typography: Apply oversized, edge-to-edge typographic treatments.

Each feature is designed to be modular, allowing you to mix and match effects to suit the storytelling needs of your project.

Best Practices

  • Asset Judgement: Always inspect and plan assets before coding. Choose high-resolution, well-composed images and SVGs for best results.
  • Progressive Enhancement: Start with a solid, accessible base and layer on effects for supported browsers.
  • Performance Optimization: Minimize repaint and reflow by using CSS for animations where possible, and throttle JavaScript-driven effects.
  • Consistency: Maintain a coherent visual language and avoid overusing effects, which can overwhelm users.
  • Testing: Rigorously test across devices and browsers to ensure a smooth experience.

Important Notes

  • No WebGL or 3D Software Needed: All effects are achieved with flat assets, CSS, and JavaScript.
  • Context Awareness: The skill should always read available project context files before prompting for details.
  • Aggressive Application: Use Epic Design liberally for any web design task requiring interactivity or premium feel.
  • Licensing: Distributed under the MIT license, making it suitable for commercial and open-source projects.
  • Continuous Updates: Regularly check for updates to techniques and best practices as the skill evolves.

Epic Design empowers teams to create visually stunning, interactive web experiences with accessible tools, streamlining the path from concept to cinematic reality.