Claude MarketplacesSubmit
hoodini avatar

Parallax Landing Page

hoodini/ai-agents-skills

Takes a 5 to 15 second video clip and turns it into a single-page landing where scroll scrubs through every frame like a filmstrip. The page never actually scrolls. Instead, wheel and touch input drives a virtual progress counter that swaps JPEGs on a canvas while five text overlays crossfade in and out. Anton headlines, Caveat handwritten accents, fixed nav, grain overlay, the whole cinematic package. Built for the parasites showcase aesthetic but works standalone. Extracts frames with ffmpeg at q:v 2, computes a scroll budget formula to keep frame advance consistent, and fills a template with your copy. Outputs a self-contained HTML file plus a frames folder. Honest take: this is a very specific look, and if that look fits your project, it saves you three hours of fidgeting with scroll listeners and preload logic.

GitHub stars
225
last updated
Jun 10, 2026
View on GitHub

Install

$ npx -y skills add hoodini/ai-agents-skills --skill parallax-landing-page --agent claude-code

Installs into .claude/skills of the current project.

Files

Parallax Landing Page

Turn a short video into a one-screen cinematic landing page where the user's scroll gesture scrubs through the video frame-by-frame while five dramatic text scenes crossfade in and out. The document never actually scrolls — wheel/touch/keyboard input is intercepted in JS and converted into virtual frame progress.

This skill encodes the patterns proven in the bundled reference at ../../examples/parasites/ (the github / lion / hope landings — three working pages built with this exact skill). Treat that folder as the ground truth if anything here is ambiguous.

Where this skill sits in the YUV.AI pyramid

parallax-landing-page is in the middle tier of the YUV.AI skills pyramid, alongside yuv-design-system, yuv-decks, yuv-viral-video, and video-to-landing-page. The top-tier orchestrator yuv-pilot routes here whenever a 5–15s video clip needs to become a single-hero scroll-scrub landing.

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/hoodini/ai-agents-skills
Categories
Frontend Development, DevOps & CI/CD, Git & Pull Requests, Code Review & Quality, AI & Agent Building, Marketing & SEO
First seen
Jun 11, 2026

More from hoodini/ai-agents-skills

All 37

Recommended

More Frontend Development
1hoodini avatarvideo-to-landing-pagehoodini/ai-agents-skillsTurn any video into a cinematic scroll-driven landing page — Apple-style hero where scrolling progresses the visible frame through the video. Use when the user 0skills.sh installs
2hoodini avataryuv-pilothoodini/ai-agents-skillsTop-of-pyramid orchestrator for Yuval Avidani's YUV.AI brand work. Apply when (a) the user wants YUV.AI output and the medium is ambiguous or multi-medium, (b) 0skills.sh installs
3htmlstreamofficial avatarpreline-theme-generatorhtmlstreamofficial/prelineGenerate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, ma0skills.sh installs
4hypnguyen1209 avatarinitial-accesshypnguyen1209/offensive-claudeModern initial access techniques — phishing, payload delivery, HTML smuggling, ISO/IMG bypass, supply chain attacks, credential stuffing, exposed service exploi0skills.sh installs
5intertwine avatardspy-fundamentalsintertwine/dspy-agent-skillsWrite idiomatic DSPy 3.2.x programs — typed Signatures, dspy.Module subclasses, Predict/ChainOfThought/ReAct/ProgramOfThought, and save/load. Use this when star0skills.sh installs
6kaelio avatarmetabase_ingestkaelio/ktxConvert Metabase questions, models, and metrics into ktx Semantic Layer source definitions. Covers result-metadata to KSL column type mapping, FK/PK detection, 0skills.sh installs