Which framework does this target?

The supplied source uses React/TypeScript, framer-motion, cn and Tailwind-style classes. The Skill asks for host-project adaptation; ports to other frameworks need to be implemented.

Does it call any external service?

The inspected code references local image paths and makes no explicit service request. The media/font files are absent from this archive, so supply them locally and verify the completed host page’s requests.

Can I swap the imagery?

Yes. Replace images with suitable local files and check the 3:4 crop. Choose image subjects by slot and remove accidental repeats in the base array; the component already duplicates that array for its moving strip.

Can visitors play a film or drag through the strip?

No player, drag controller or step buttons are implemented. The strip is an automatic repeating image translation.

Does the CTA open my sign-up page?

Not yet. The current button has no href or handler. Add an explicit action, then test its destination and keyboard operation.

Film Strip Hero

Previews from the publisher

Introduce a visual service with a centered headline above a moving strip of tilted images. Portrait-format tiles repeat across the lower part of the viewport while the title, supporting text and CTA stay in the foreground. This is an editable React image-marquee hero, not a video player or a visitor-controlled film editor. Your local images and action wiring complete the example.

What you get

A React/TypeScript AnimatedMarqueeHero component and demo, with props for tagline, title, description, CTA label and image array. The source is copied into your project to adapt and maintain, rather than installed as a versioned block package.
A viewport-height composition with a masked image strip in its lower third, increasing to two-fifths from the medium breakpoint. Tiles use 3:4 proportions and alternating slight angles; the image array is duplicated for an automatic 40-second repeating translation.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings, a 0.875rem base radius and restrained entrances. Icons are specified as inline SVG with 1.5 px square-cap strokes, with real vendor marks monochrome and beside visible names. Reconcile the copied example with those references rather than assuming every hardcoded value already follows them.
A local-path image example, imagery/icon guidance, third-party notes and source checker. The archive references cover images but contains no image or WOFF 2 font binaries. The host project must supply React, framer-motion, cn, utility styling and the actual files.

Before you choose

Let the selected images establish the service before the moving strip becomes an attraction by itself. Use a concise, substantiated message and verify that the CTA remains usable on a short phone screen.

Good fit

A studio, creator or visual service with a coherent selection of work images to show immediately.
A page needing an existing headline/action/image composition rather than an empty hero layout.
A team wanting editable source and prepared motion structure while retaining responsibility for integration and maintenance.

Not for

A film player, video editing tool, manually stepped carousel or scroll-progress-controlled gallery.
A dependency-free/versioned package or a guaranteed fit with an existing mature design system.
A complete application with a connected CTA, sign-up, forms, authentication, checkout or automatic generation of missing work imagery.

How to use

You say

/hero-film-strip Add the Film Strip Hero section to the top of the landing page for [product name]. Use my supplied copy and assets, and follow the existing page framework and styling.

Read the project’s stack and copy the component/demo into its component and styling conventions. Resolve React, framer-motion and cn, retaining an appropriate client boundary. Other frameworks need an actual port; standalone HTML is an optional standalone adaptation, not the default output for an existing app.
Write a truthful tagline, concise title and supporting copy. Replace the example’s 100,000-builder statement unless you can substantiate it. A string title splits into animated word spans; the demo uses a React fragment instead, so it does not exercise that word-by-word path.
Supply a coherent set of local images. The demo repeats eight paths twice and the component duplicates the array again for its loop; provide a clean base set before judging repetition. Follow the imagery guide: portraits for people, abstract plates in special blend/invert/contain slots, photos elsewhere, meaningful person/name pairings and local WebP sized for delivery. Fonts also need local files.
Connect the CTA in source: its current internal button accepts only children and has no destination or click handler. Reconcile the hardcoded red button/hover/focus colors with the written warm/teal token contract rather than assuming a single accent change covers all states.
Run node scripts/check-blocks.mjs TARGET, build the host page and review the narrow/short viewport where fixed height and bottom imagery can compete with copy. Test the actual action and focus, the repeated-strip boundary and reduced-motion/pause treatment, which are not provided as dedicated controls. The checker detects selected source patterns; it does not prove runtime network behavior or a seamless loop at every image count.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT