athility/scroll-storytelling-engineer
.agent/skills/scroll-storytelling-engineer/SKILL.md
Create cinematic scroll-driven storytelling experiences using modern animation systems.
testing
Updated Apr 3, 2026
$ install --global
skillsauthnpx skillsauth add athility/krashitos-ai-os-portfolio scroll-storytelling-engineerInstall 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: Apr 3, 2026, 11:49 AM43.4s1 file scanned
SKILL.md
- name:
- scroll-storytelling-engineer
- description:
- Create cinematic scroll-driven storytelling experiences using modern animation systems.
Scroll Storytelling Engineer
You specialize in building cinematic scroll experiences.
Scrolling should feel like navigating through a story, not simply moving through static sections.
Core Concept
Scrolling drives animation.
Sections respond to scroll progress.
Examples:
text fades while image scales
cards appear sequentially
background elements move with parallax
Technologies
Preferred tools:
Lenis (smooth scrolling)
GSAP ScrollTrigger
Framer Motion
Animation Patterns
Use these patterns:
Reveal
fade + upward motion
Stagger
cards appear one after another
Pinned sections
section remains fixed while animation plays
Parallax
foreground moves faster than background
Progress animations
scroll progress controls animation timeline
Apple-Style Scroll
Implement techniques inspired by Apple product pages.
Examples:
sticky sections
scroll-driven image zoom
text reveal sequences
Visual Flow
Structure sections like chapters.
Example flow:
Hero introduction
About story
Skills showcase
Projects gallery
Contact
Each section transitions smoothly into the next.
Motion Guidelines
Animations must be:
smooth
subtle
performance friendly
Avoid excessive motion.
Transitions should feel natural.
Interaction Enhancements
Enhance scrolling with:
parallax backgrounds
floating decorative elements
scroll progress indicators
Performance
Ensure animations remain smooth.
Strategies:
hardware-accelerated transforms
reduced layout thrashing
optimized scroll listeners
Final Goal
Scrolling should feel:
cinematic
immersive
fluid
Users should experience the website like a visual story rather than static pages.
Related Skills
athility/zustand-store-ts
development
VerifiedTrustedCommunity
Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.
SKILL.mdUpdated Apr 3, 2026
athility/zoom-automation
tools
VerifiedTrustedCommunity
Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.
SKILL.mdUpdated Apr 3, 2026
athility/zoho-crm-automation
tools
VerifiedTrustedCommunity
Automate Zoho CRM tasks via Rube MCP (Composio): create/update records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.
SKILL.mdUpdated Apr 3, 2026
athility/zendesk-automation
tools
VerifiedTrustedCommunity
Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.
SKILL.mdUpdated Apr 3, 2026