narrating-web-experiences

Community

Craft immersive scroll-driven stories.

Authoralexejluft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the challenge of creating engaging, narrative-driven web experiences that guide users through content using smooth scrolling and dynamic animations.

Core Features & Use Cases

  • Smooth Scrolling: Integrates Lenis for buttery-smooth scrolling.
  • Scroll-Triggered Animations: Leverages GSAP ScrollTrigger for precise control over animations based on scroll position.
  • Progressive Reveals & Pinning: Implements techniques for revealing content as users scroll and pinning elements for emphasis.
  • Accessibility: Ensures prefers-reduced-motion is respected for a better user experience.
  • Use Case: Building a product landing page where features are introduced sequentially with subtle animations as the user scrolls down, or creating an interactive timeline that animates into view.

Quick Start

Use the narrating-web-experiences skill to build a scroll-driven storytelling interface for the main landing page.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: narrating-web-experiences
Download link: https://github.com/alexejluft/brudi/archive/main.zip#narrating-web-experiences

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.