living-elements: animated hero assets

Ad creative Desktop

What it does

living-elements produces an animated “living” hero asset for premium pages. It generates a high-quality still image, animates it into a subtle, seamlessly looping background video, and hands you a drop-in HTML snippet.

The result is a hero that quietly comes alive: drifting smoke, slow product rotation, a flickering light, a character breathing. That slight motion creates the “wait, did that just move?” pause that earns a second look. For pages where the craft of the work needs to be felt immediately, a breathing hero does more than any headline can.

This is a premium-pages-only skill. It is intentionally rationed. Using it on every page kills the effect. Reserve it for your flagship site, a marquee client lander, or a brand showcase. Advertorials, listicles, lead-asset showcases, and transactional pages do not get living heroes.

When to reach for it

• You’re building a flagship homepage, brand showcase, or high-craft lander and the hero needs to feel world-class from the first second.
• You want premium motion without a complex video shoot: the two-stage AI pipeline handles the whole production.
• You’re inside a /page-architect or /assessment-builder build and Max explicitly asks for a living hero on a specific page.

When to skip it

• Advertorials, listicles, lead-asset showcases, quiz funnels, or any transactional page.
• Situations where you want a direct-response video ad (with dialogue, a hook, and a CTA): that’s /seedance-video-ad-generator.
• Motion graphics, stat reveals, or captioned reels: that’s /motion-video.
• Any time Max hasn’t asked for it. This skill is manual opt-in only. It never fires automatically.

Where it runs

Desktop only

living-elements requires the Claude Code desktop app with your AI API keys configured. It calls external AI services (image generation and video animation) that need those keys to run. Cowork cannot render living hero assets. If you haven’t set up your keys yet, see API key setup.

How to run it

Trigger it by name from the chat:

“Add a living hero to this page.”

Or, if you’re mid-build inside /page-architect:

“/living-elements for the flagship homepage, brand is examplebrand.com”

Or reference the quality bar you’re aiming for:

“I want a breathing hero like the jasondoesstuff reference. Run /living-elements.”

What it needs from you

• The page being built (or a brand URL if running standalone).
• A concept pick at Step 1: it proposes 3 motion concepts, you choose one before any AI generation runs.
• A still pick at Step 2: it generates 3 still candidates, you pick one before animation starts.
• A motion approval after the Seedance render, before the embed is built.
• A final embed approval before files ship.

Four gates total. Each gate is an explicit approval from you. This keeps Creatify API credits from going toward the wrong direction.

What you get back

A complete hero asset package, ready to embed:

• hero.mp4 (h264, mobile-safe, faststart)
• hero.webm (vp9, modern browsers)
• hero-poster.jpg (the picked still, serves as the visible image while the video loads)
• A drop-in HTML/CSS embed snippet

The embed handles everything: autoplay, muted, loop, the poster image for slow connections, and a prefers-reduced-motion swap that shows the still poster instead of playing the video for visitors who have motion sensitivity enabled in their OS.

Performance budget: the MP4 and WebM together stay under 3MB. Anything over that harms mobile load times, so the skill compresses aggressively before shipping.

A worked example

You: “Add a living hero to the UM flagship homepage. Something with ambient light or subtle drift.”

living-elements: (after reading the project context)

Here are 3 concept options:

Option A: Rim-light breath cycle. The UM mark sits in a dark field; a soft rim light pulses from the right once every 5s, mimicking a slow breath. Motion: barely perceptible. Loop: 5s.

Option B: Floating depth particles. Faint geometric particles drift slowly upward against a deep navy. Subject: abstract. Motion: continuous slow drift. Loop: 6s.

Option C: Glass surface light shift. A dark glass panel, light source shifts subtly left to right over 4s, giving the surface a living quality without any obvious movement. Loop: 4s.

(You pick Option C.)

living-elements: Generating 3 still candidates for the glass-surface concept…

(3 stills rendered. You pick one. Animation runs. Loop QA passes. Embed snippet returned.)

Hero package ready. Total file size: 2.4MB. Poster saved. Reduced-motion fallback included.

Tips & gotchas

• It won’t run without a real reference image for the subject. All Nano Banana generation passes real product or scene reference images. If no reference exists for your subject, it stops and asks rather than fabricating something generic.
• The four gates protect your API credits. Each gate is a “before we spend money on the next step, is this right?” check. Let them run rather than trying to skip them.
• Loop seam quality matters. The skill checks that the last frame matches the first frame closely enough that no jump is visible over 3 consecutive cycles. If it fails, it re-renders with a tighter prompt.
• Use restraint. One living hero on your flagship reads as premium craft. Living heroes on every page reads as a template. The signal is in the rarity.
• Reduced motion is automatic. You don’t have to build the fallback yourself. The embed snippet includes the poster swap CSS out of the box.

Related skills

living-elements is a single production step, not a full-page builder. Use it inside /page-architect (Phase 2B or Phase 3) for a complete page build. The ambient motion it produces is different in purpose from /seedance-video-ad-generator (which writes 8-10s ad clips with dialogue and a CTA) and /motion-video (which handles motion graphics and data-driven video). Those are separate disciplines: don’t borrow their formulas here.