Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Cinema reel hero: 1440, made in this run
Run 1Cinema reel hero“Hero with a moving film strip for our wedding videography studio. Copy in brief.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Cinema Reel Hero

A festival-style hero with a sprocketed film strip of stills gliding across the bottom, dates and a ticket button.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds a hero with a moving film strip of stills into your own project: near-black hero; top left the festival dates in amber, a huge headline and two buttons; across the bottom a full-width film strip with sprocket holes carries eight stills, each with a title on a dark band, gliding left; hover or Pause motion stops it. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a film festival, cinema, video studio, production company or photography event wants a cinematic hero, or someone asks for a film strip, reel or cinema-style hero.

By RecaplyUpdated 12 Nov

Install Cinema Reel Hero

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/cinema-reel-hero/install.md and follow it to install the cinema-reel-hero skill from cinema-reel-hero.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Cinema Reel Hero is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A hero with a moving film strip of stills
  • Checked at phone and desktop widths

Good fit

  • When a film festival, cinema, video studio, production company or photography event wants a cinematic hero

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Hero with a moving film strip for our wedding videography studio. Copy in brief.md.

It said back

I've built the hero as plain HTML, CSS and JS in index.html, style.css and script.js. The strip uses placeholder frames because the 10 stills weren't in the project folder.

The automated check passes. It covers overflow at 390, 768 and 1440 px, text size, names, contrast, focus styles, reduced motion and script errors. I looked at the 390 and 1440 screenshots: nothing is cut off and the layout holds on both. I didn't open the 768 one.

Show more

What it did in run 1

  1. cinema-reel-hero
  2. ls -la && cat brief.md
  3. S=.claude/skills/cinema-reel-hero && ls -R . | grep -v node_modules | head -50; cat $S/reference/index.html $S/reference/style.css $S/reference/script.js
  4. find . -type f
  5. ./.claude/skills/cinema-reel-hero/reference/index.html
  6. ./.claude/skills/cinema-reel-hero/reference/style.css
  7. ./.claude/skills/cinema-reel-hero/reference/script.js
  8. mkdir -p /tmp/gen && cat > /tmp/gen/gen.mjs <<'EOF' import fs from 'node:fs'; const out = process.argv[2], ref = process.argv[3]; const pal = [['#2A2620','#8A7347'],['#1F1C18','#B89B5E'],['#34302A','#E9DFC9'],['#26221D','#D8B879'],['#3A342B','#C9B48A']]; const frame = (i, hidden) => { const [a,b] = pal[i%5], n = String(i+1).padStart(2,'0'); const cx = 90 + (i*37)%220; const svg = <svg viewBox="0 0 400 250" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><rect width="400" height="250" fill="${a}"/><circle cx="${cx}" cy="80" r="${26+(i%3)*8}" fill="${b}" opacity=".55"/><path d="M0 170 q50 -${10+i*2} 100 0 t100 0 t100 0 t100 0 V250 H0z" fill="${b}" opacity=".35"/><path d="M0 205 q50 -12 100 0 t100 0 t100 0 t100 0 V250 H0z" fill="#0F0E0C" opacity=".6"/></svg>; return <li${hidden?' aria-hidden="true"':''}><a class="fs-f" href="#films"${hidden?' tabindex="-1"':''}>${svg}<span>Wedding film ${n}</span></a></li>; }; const a = Array.from({length:10},(_,i)=>frame(i,false)).join('\n '); const b = Array.from({length:10},(_,i)=>frame(i,true)).join('\n '); fs.writeFileSync(out+'/index.html', <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Silverline Films | Wedding videography</title> <meta name="description" content="Two filmmakers, a 10-minute film and a 90-second trailer within six weeks of your wedding."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <div class="hero fs"> <header class="hbar wrap"> <a class="brand" href="#main">Silverline Films</a> <a class="btn btn-primary" href="#dates">Check our dates</a> </header> <main id="main"> <div class="wrap fs-in"> <p class="h-kick">Wedding videography</p> <h1>Your day, filmed like a feature</h1> <p class="h-lede">Two filmmakers, a 10-minute film and a 90-second trailer within six weeks.</p> <div class="h-acts"> <a class="btn btn-primary" href="#dates">Check our dates</a> <a class="btn btn-ghost" href="#films">Watch a full film</a> </div> </div> <!-- PLACEHOLDER frames: replace each <svg> with <img src="..." alt="..."> of a real still, and the span with the couple's film title. Keep the second (aria-hidden) list identical to the first. --> <div class="fs-strip" role="region" aria-label="Stills from our wedding films" tabindex="0"> <ul class="fs-reel"> ${a} ${b} </ul> </div> </main> <button class="hpause" type="button" data-hero-pause>Pause motion</button> </div> <script src="script.js" defer></script> </body> </html> ); let css = fs.readFileSync(ref+'/style.css','utf8'); css = css.replace('--accent:#F2A93B;--on-accent:#1A1205;--em:#F7C46C;','--accent:#E2C285;--accent-hover:#F0DAA8;--on-accent:#17120A;--em:#EBD3A0;') .replace('--bg:#0F0E0C','--bg:#0C0B0A').replace('--ink:#F7F2EA','--ink:#F6F0E2'); css = css.replace('.fs-f img','.fs-f img').replace('.fs-f svg{width:100%;height:100%}','.fs-f svg,.fs-f img{width:100%;height:100%;object-fit:cover}'); fs.writeFileSync(out+'/style.css', css); fs.copyFileSync(ref+'/script.js', out+'/script.js'); EOF cd . && node /tmp/gen/gen.mjs . .claude/skills/cinema-reel-hero/reference && node .claude/skills/cinema-reel-hero/scripts/check.mjs index.html --out check 2>&1 | tail -40
  9. /tmp/gen/gen.mjs
  10. node /tmp/gen/gen.mjs . .claude/skills/cinema-reel-hero/reference && node .claude/skills/cinema-reel-hero/scripts/check.mjs index.html --out check 2>&1 | tail -40
  11. ./check/1440.png
  12. ./check/390.png
  13. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min · $0.25 of API use

Questions

Is Cinema Reel Hero free?

No. Cinema Reel Hero costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Cinema Reel Hero?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Cinema Reel Hero?

A ZIP of the whole skill folder (34 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Cinema Reel Hero?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./cinema-reel-hero with your agent's flag.

What do I get from Cinema Reel Hero?

One HTML file with its CSS inside: no build step, no framework. A hero with a moving film strip of stills. Checked at phone and desktop widths.

What does Cinema Reel Hero need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Cinema Reel Hero?

7 files, about 28,513 tokens in all. The SKILL.md is about 2,201 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min to 1 min and $0.25 to $0.25 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Cinema Reel Hero to use it?

Type /cinema-reel-hero first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.