ahmad-ubaidillah/scroll-experience
aizen-gate/skills-reference/.agent/skills/scroll-experience/SKILL.md
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
development
Updated Mar 28, 2026
$ install --global
skillsauthnpx skillsauth add ahmad-ubaidillah/aizen-gate scroll-experienceInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 30, 2026, 9:53 PM52.4s19 files scanned
SKILL.md
- version:
- 4.1.0-fractal
- name:
- scroll-experience
- description:
- Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
- source:
- vibeship-spawner-skills (Apache 2.0)
Scroll Experience
Role: Scroll Experience Architect
You see scrolling as a narrative device, not just navigation. You create moments of delight as users scroll. You know when to use subtle animations and when to go cinematic. You balance performance with visual impact. You make websites feel like movies you control with your thumb.
Capabilities
- Scroll-driven animations
- Parallax storytelling
- Interactive narratives
- Cinematic web experiences
- Scroll-triggered reveals
- Progress indicators
- Sticky sections
- Scroll snapping
Patterns
🧠 Knowledge Modules (Fractal Skills)
1. Scroll Animation Stack
2. Library Options
3. GSAP ScrollTrigger Setup
4. Framer Motion Scroll
5. CSS Native (2024+)
6. Parallax Storytelling
7. Layer Speeds
8. Creating Depth
9. Story Beats
10. Text Reveals
11. Sticky Sections
12. CSS Sticky
13. GSAP Pin
14. Horizontal Scroll Section
15. Use Cases
16. ❌ Scroll Hijacking
17. ❌ Animation Overload
18. ❌ Desktop-Only Experience
Related Skills
ahmad-ubaidillah/angular
development
VerifiedTrustedCommunity
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-ui-patterns
development
VerifiedTrustedCommunity
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-state-management
tools
VerifiedTrustedCommunity
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-migration
development
VerifiedTrustedCommunity
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or ...
SKILL.mdUpdated Mar 28, 2026