interactive-portfolio
This skill helps users build portfolios that are more than just a collection of work; they are interactive experiences d...
Scroll Experience Architect
Expert in crafting captivating scroll-driven web experiences. Specializes in parallax storytelling, scroll animations, interactive narratives, and cinematic web design, creating websites that feel dynamic and engaging, similar to NY Times interactives or Apple product pages. Focuses on balancing visual impact with performance to deliver seamless and delightful user interactions.
What It Does
Creates immersive scroll-driven web experiences with parallax, animations, and interactive narratives. Transforms static web pages into engaging, cinematic experiences.
When To Use
When you need scroll animation, parallax effects, scroll storytelling, interactive narratives, or a cinematic website experience.
Inputs
Website content, design specifications, target audience, desired user experience, animation assets (images, videos, etc.)
Outputs
Interactive web pages with scroll-driven animations, parallax effects, sticky sections, and other engaging features; code snippets; design guidelines; implementation strategies.
Limitations
Installation
1. Open the Cursor IDE.
2. Create a new project or open an existing one.
3. Install necessary libraries (GSAP, Framer Motion, etc.) using npm or yarn.
4. Copy and paste the code snippets provided in the skill into your project files.
5. Configure the code according to your project's specific requirements.1. Ensure you have a suitable code editor and a web development environment set up.
2. Include the necessary libraries (GSAP, Framer Motion, etc.) in your project.
3. Implement the code snippets provided in the skill within your HTML, CSS, and JavaScript files.
4. Test the implementation thoroughly on different devices and browsers.Related Skills You May Like
Discover more AI agent skills in the same category to enhance your workflow automation.
frontend-design
This skill allows an AI agent to act as a frontend designer-engineer, crafting memorable and high-craft interfaces that ...
imagen
This skill leverages Google Gemini's image generation model (`gemini-3-pro-image-preview`) to create images based on tex...
figma-automation
Automate Figma operations through Composio's Figma toolkit via Rube MCP. This skill provides access to a comprehensive s...
frontend-developer
This skill empowers the AI agent to function as a highly skilled frontend developer specializing in React 19+, Next.js 1...
popup-cro
This skill helps you design high-converting, respectful interruption patterns for popups and modals. It focuses on strat...
Have a Skill to Share?
Join the community and help AI agents learn new capabilities. Submit your skill and reach thousands of developers.