Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add S3YED/appie-kit --skill scroll-hero-videogit clone --depth 1 https://github.com/S3YED/appie-kitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/s3yed/appie-kit/scroll-hero-video)<a href="https://agentmods.dev/skills/s3yed/appie-kit/scroll-hero-video"><img src="https://agentmods.dev/badge/skills/s3yed/appie-kit/scroll-hero-video.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00046 | $0.02828 |
| Opus 5 | $0.00023 | $0.01414 |
| Sonnet 5 | $0.00009 | $0.00566 |
| Haiku 4.5 | $0.00005 | $0.00283 |
Grade A, and why
scroll-hero-video scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
fetch(src, { cache: 'force-cache' }) How it starts
The opening of the file, as written. The whole thing — 240 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Scroll Hero Video
Build a scroll-driven video hero where a full-screen video scrubs in sync with scroll position — the Apple product page effect.
When to use
- Landing page hero needs a premium, interactive feel
- You have a short video (5–10s) that tells a story (before/after, product reveal, transformation)
- Desktop-first: mobile gets autoplay loop fallback
Requirements
- Short video (5–10s, 720p recommended)
- ffmpeg for encoding
- No JS dependencies needed (vanilla JS)
Step 1: Encode the video
The video MUST have every frame as a keyframe (-g 1) so seeking is instant. Use Soleiman/LuxHom proven specs:
ffmpeg -i source.mp4 \
-c:v libx264 \
-g 1 \
-crf 26 \
-preset medium \
-pix_fmt yuv420p \
-movflags +faststart \
-an \
-vf "scale=1280:720:flags=lanczos,fps=24" \
scrub.mp4
Key params:
| Param | Why |
|---|---|
-g 1 |
Every frame is a keyframe — enables instant seeking to any position |
-crf 26 |
Balance quality/file size (28 = smaller/lower, 24 = larger/better) |
scale=1280:720 |
720p is plenty for background video — 1080p adds 3-4x weight |
fps=24 |
Lower FPS = fewer frames to seek = smoother scrub |
-an |
No audio needed for scrub |
| Target: ~5-6MB for a 7s video at 5.8 Mbps |
Soleiman reference: 1280x714, 24fps, 6Mbps, 6MB for 8s video.
Step 2: HTML structure
<section class="hero" id="hero">
<div class="hero-sticky">
<video id="heroVideo" muted playsInline preload="auto" poster="poster.jpg">
<source src="videos/scrub.mp4" type="video/mp4">
</video>
<div class="hero-overlay" id="heroOverlay">
<!-- Your hero content: pre-title, heading, tagline, CTAs -->
</div>
<div class="hero-scroll-hint" id="scrollHint">
<span>Scroll voor de transformatie</span>
</div>
</div>
</section>
Key:
- Section height:
250vh(scrubs over ~1.5 viewports) - Inner div:
position: sticky; top: 0; height: 100vh— pins video - Video:
position: absolute; inset: 0; object-fit: cover
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 240 lines · 46 tokens per session scan A 92d3f9f9a792
scroll-hero-video is a skill published in the GitHub repository S3YED/appie-kit (7 stars, last pushed 11d ago), licensed MIT. It adds 46 tokens to every session and 2,828 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
hyperframes-animation
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4…
frame-liquid-bg-hero
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
frame-liquid-bg-hero
A design template for a fluid, colorful background with large overlaid text, suitable for a video opening, website landing-page hero, or poster. It offers CSS, canvas, or WebGL approaches, with a static fallback for reduced motion or simpler use.
animation-patterns
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
component-library-patterns
Design system token management, component API design, Storybook, and visual regression testing patterns.
design-loop
Autonomous multi-page site builder using a baton-passing loop. Each iteration reads a task from .design/next-prompt.md, generates a page in HTML/Tailwind, integrates it into the site, verifies visually, then writes the next task to keep the loop alive. Use whenever the user asks to build an entire site autonomously…