Scroll Experience Architect

by v1.0.0

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

Requires proficiency in HTML, CSS, and JavaScript. Complex animations may impact website performance. Mobile optimization is crucial for a seamless experience.

Installation

Add to Copilot workspace settings

View GitHub Copilot documentation

Add to .cursor/skills/

View Cursor IDE documentation

Copy to ~/.claude/skills/

View Claude (Anthropic) documentation

Add to .vscode/skills/

View VS Code documentation

What people say, and where to get help

No ratings yet. If you have used this skill, yours would be the first.

No reviews yet

This skill has not been rated. If you have run it, a short note about what you used it for helps the next person more than any description can.

Related Skills You May Like

Discover more AI agent skills in the same category to enhance your workflow automation.

Have a Skill to Share?

Join the community and help AI agents learn new capabilities. Submit your skill and reach thousands of developers.