How does this skill differ from manually adding a GIF or video to my site?

This skill automates the complex pipeline of generating cinemagraphs via the Seedance API and deploying them with optimized, scroll-aware code that prevents layout shifts and flickering.

What exactly is included in the purchase?

The skill delivers the core animation logic, the asset processing scripts, and the front-end components (HTML/CSS/JS) needed to implement high-performance, scroll-triggered living photos.

Can I use this skill with my existing React or Astro project?

Yes, it is built to be framework-agnostic and includes specific patterns for React, Vue, Astro, and WordPress, ensuring the Intersection Observer logic works across different DOM structures.

How does the cinemagraph handle accessibility for users who are sensitive to motion?

The skill includes built-in accessibility logic that automatically detects 'prefers-reduced-motion' settings, serving a static fallback image to ensure WCAG 2.2.2 compliance for your users.

Are there any external dependencies or API keys required to use this skill?

You will need a Seedance API key for the motion synthesis, and your local environment must have ffmpeg and jq installed to handle the automatic video optimization and formatting.

cinemagraph section

Features

Astro, Vue, React, or WordPress — ready-made example components for
all four under examples/, same logic, each translated idiomatically.
No hand-translating the vanilla JS version yourself.
Accessible by default — the video is aria-hidden, the photo carries
the alt text. prefers-reduced-motion is checked before anything loads,
not just before playing. Runtime under 5s keeps it exempt from WCAG 2.2.2.
SEO is not an afterthought — lazy-loading, explicit image dimensions
against layout shift, real alt text required. The photo carries all the
SEO weight, the video is a bonus layered on top.
No photo? No problem — the examples above are fully AI-generated,
fictional brands and labels included. The skill generates a fitting base
image itself if none exists yet, before animating it.
Deliberately simple, on purpose — a hand-rolled loading state
machine looked more sophisticated but broke in production more than the
plain version does. Real <source> tags in the markup, the native
playing event, two gotchas solved (not four), and a documented reason
not to reintroduce the complexity, see "Why static <source> tags" in
EMBED-PATTERN.md.
MIT-licensed, fully open — read it, change it, fork it. No hidden
dependency on a service or on me.

What it does

Generates the clip — calls the Seedance API (api.seevio.ai) directly
from a local photo, no manual prompt-copying into another tool. Submits
the job, polls for completion, downloads the result, converts it to
webm alongside the mp4.
Wires it into the page — a battle-tested scroll-triggered crossfade
pattern (static image ↔ video), kept deliberately simple: real
<source> tags in the markup, not JS-injected ones, and the browser's
native playing event instead of a hand-rolled loading state machine.
Two gotchas that actually bite in practice already solved: don't
observe a display:none element with IntersectionObserver, and
don't reset the animation at the same scroll position that triggered
it or it visibly flickers.

About this skill

Turn a still photo into a cinemagraph, a mostly-static image with one small looping or one-shot motion, and wire it into a page section so the motion plays once the image scrolls into view, then resets to the still frame when it scrolls back out.

Works for more than portraits: a person winking, flowers opening, a product label coming to life on a shop page, water rippling, a hand raising a cup. Anything where the rest of the frame stays locked and one contained thing moves.

Frequently Asked Questions

cinemagraph section