epic-design

What This Skill Does

The epic-design skill is a comprehensive toolkit for building immersive, cinematic 2.5D interactive websites within the OpenClaw agent ecosystem. It enables developers to implement complex, scroll-driven narratives without the overhead of WebGL or specialized 3D software. By leveraging CSS, JavaScript, and layered static assets, the skill produces premium, high-performance visual experiences—including parallax depth, sticky sections, floating product animations, and sophisticated text reveals. It manages the entire asset lifecycle, from inspection and background removal evaluation to the final implementation of motion-responsive layers that feel like a high-end, award-winning web product.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/alirezarezvani/epic-design Ensure your project repository is initialized and you have the necessary permissions to execute scripts, as this skill utilizes local asset inspection utilities.

Use Cases

• Landing Pages: Transforming static marketing sites into high-conversion, cinematic stories.
• Product Showcases: Creating floating product reveals where items rise or rotate as the user scrolls down the page.
• Luxury/Brand Sites: Implementing subtle scroll-based typography reveals and curtain-drop transitions that signify high-end design.
• Portfolio Sites: Building interactive galleries where images and text layers shift at different velocities to create a sense of depth.
• Interactive Narratives: Implementing 'scrollytelling' features where complex information is presented through progressive disclosure as the user moves through the document.

Example Prompts

1. "I have a hero section with a product image and some title text. Make it feel alive, add some parallax, and make the product rise between this section and the next."
2. "Build me a cinematic landing page for a new coffee brand. Use Apple-style animations, sticky sections for the key features, and some text that flies in from the sides as I scroll."
3. "I need to upgrade my portfolio's about section. Add an iris-open transition effect and ensure all my header text lights up dynamically as it enters the viewport."

Tips & Limitations

• Asset Inspection: Always allow the script to inspect your assets first. Using non-optimized or improperly masked images will break the 2.5D illusion.
• Performance: While it avoids WebGL, heavy DOM manipulation can impact mobile performance. Ensure you test your scroll-driven animations on various device widths.
• Layer Management: Keep your z-index logic organized. The skill provides helper scripts to validate layers; utilize them early to avoid collision issues in complex sections.
• Constraint: This skill is focused on 2.5D effects. If your project requires true 3D physics or complex real-time lighting, consider integrating supplemental tools alongside this skill.