mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
docs(30-days): hover a card to hear the film's audio
Adds a HoverVideo snippet (autoplay muted, unmute + play on hover, re-mute on leave) and points the 18 days whose source has real audio at new -s.mp4 keys re-encoded with sound (CDN is immutable, so new keys not overwrites). The other 12 days have genuinely silent sources and stay muted. Honours prefers-reduced-motion.
This commit is contained in:
ukimsanov
@@ -0,0 +1,62 @@
|
||||
export const HoverVideo = ({ src, poster, className }) => {
|
||||
const videoRef = useRef(null);
|
||||
const [muted, setMuted] = useState(true);
|
||||
|
||||
// Lazy initializer, not a post-mount effect: with useState(false) the first
|
||||
// committed render would emit `<video src autoPlay loop>` and only then pull the
|
||||
// attributes, so a reduce-motion visitor has already started fetching the file.
|
||||
const [reduced, setReduced] = useState(
|
||||
() =>
|
||||
typeof window !== "undefined" &&
|
||||
typeof window.matchMedia === "function" &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches,
|
||||
);
|
||||
useEffect(() => {
|
||||
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const onChange = () => setReduced(query.matches);
|
||||
query.addEventListener("change", onChange);
|
||||
return () => query.removeEventListener("change", onChange);
|
||||
}, []);
|
||||
|
||||
// React can drop src/autoPlay/loop from the DOM, but that neither pauses a
|
||||
// playing element nor aborts its resource: pause(), removeAttribute("src") and
|
||||
// load() are all required when the preference flips to reduce mid-session.
|
||||
useEffect(() => {
|
||||
if (!reduced) return;
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
video.pause();
|
||||
video.removeAttribute("src");
|
||||
video.load();
|
||||
}, [reduced]);
|
||||
|
||||
const hear = () => {
|
||||
if (reduced) return;
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
setMuted(false);
|
||||
video.muted = false;
|
||||
video.play().catch(() => {});
|
||||
};
|
||||
const silence = () => {
|
||||
setMuted(true);
|
||||
const video = videoRef.current;
|
||||
if (video) video.muted = true;
|
||||
};
|
||||
|
||||
return (
|
||||
<video
|
||||
ref={videoRef}
|
||||
className={className}
|
||||
src={reduced ? undefined : src}
|
||||
poster={poster}
|
||||
autoPlay={!reduced}
|
||||
muted={muted}
|
||||
loop={!reduced}
|
||||
playsInline
|
||||
preload="none"
|
||||
onMouseEnter={hear}
|
||||
onMouseLeave={silence}
|
||||
/>
|
||||
);
|
||||
};
|
||||
+20
-18
@@ -4,6 +4,8 @@ sidebarTitle: 30 Days of HyperFrames
|
||||
description: "The official 30 Days of HyperFrames lessons, collected in one place as the series is published."
|
||||
---
|
||||
|
||||
import { HoverVideo } from "/snippets/hover-video.jsx";
|
||||
|
||||
|
||||
One lesson a day, each one built and rendered before it was posted. Every day below links to its original post for the prompt and the discussion; where the film or a frame from it is published, you can see the result here first.
|
||||
|
||||
@@ -29,25 +31,25 @@ Days 1 to 9 cover the inputs: a repo, a track, a topic, a speaker, a design file
|
||||
|
||||
</Card>
|
||||
<Card title="Day 3 — PR-to-Video" href="https://x.com/HeyGen/status/2074954182583554051">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-03.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-03.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-03-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-03.jpg" />
|
||||
|
||||
Explain an open pull request as a short video. Plays in full [above](#three-lessons-in-full).
|
||||
|
||||
</Card>
|
||||
<Card title="Day 4 — Music-to-Video" href="https://x.com/HeyGen/status/2075262117964615956">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-04.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-04.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-04-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-04.jpg" />
|
||||
|
||||
Build a video around a track and its beat. Plays in full [above](#three-lessons-in-full).
|
||||
|
||||
</Card>
|
||||
<Card title="Day 5 — Faceless explainer" href="https://x.com/HeyGen/status/2075682104302882908">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-05.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-05.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-05-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-05.jpg" />
|
||||
|
||||
Turn a topic into a designed explainer without footage. The visuals are invented per scene.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 6 — Talking-head recut" href="https://x.com/HeyGen/status/2075998619325604238">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-06.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-06.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-06-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-06.jpg" />
|
||||
|
||||
Add synchronized graphics to an existing speaker video. The source clip plays untouched underneath.
|
||||
|
||||
@@ -59,7 +61,7 @@ Days 1 to 9 cover the inputs: a repo, a track, a topic, a speaker, a design file
|
||||
|
||||
</Card>
|
||||
<Card title="Day 8 — Music and SFX with the HeyGen CLI" href="https://x.com/HeyGen/status/2076719036742922504">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-08.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-08.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-08-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-08.jpg" />
|
||||
|
||||
Find and use audio from the command line, then let the mix duck itself under the narration.
|
||||
|
||||
@@ -84,13 +86,13 @@ Days 10 to 19 are about steering: how you ask, what you inspect, and what you fi
|
||||
|
||||
</Card>
|
||||
<Card title="Day 11 — Repurpose an existing video" href="https://x.com/HeyGen/status/2077798995762823593">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-11.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-11.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-11-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-11.jpg" />
|
||||
|
||||
Extract useful patterns from a reference instead of describing them from memory.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 12 — Dynamic captions" href="https://x.com/HeyGen/status/2078190361932103716">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-12.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-12.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-12-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-12.jpg" />
|
||||
|
||||
Make captions part of the visual design rather than a track laid on top.
|
||||
|
||||
@@ -114,25 +116,25 @@ Days 10 to 19 are about steering: how you ask, what you inspect, and what you fi
|
||||
|
||||
</Card>
|
||||
<Card title="Day 16 — Media use" href="https://x.com/HeyGen/status/2079609229737111978">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-16.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-16.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-16-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-16.jpg" />
|
||||
|
||||
Work with the available asset libraries, and control how each one crops and fits.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 17 — Storyboard" href="https://x.com/HeyGen/status/2080012076454719554">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-17.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-17.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-17-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-17.jpg" />
|
||||
|
||||
Agree on the sequence before building every scene, so revisions land on the plan rather than the render.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 18 — HyperFrames in Video Agent" href="https://x.com/HeyGen/status/2080407266755510452">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-18.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-18.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-18-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-18.jpg" />
|
||||
|
||||
Create with HyperFrames inside HeyGen Video Agent.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 19 — Background removal" href="https://x.com/HeyGen/status/2080762012330807438">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-19.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-19.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-19-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-19.jpg" />
|
||||
|
||||
Use alpha channels to layer subjects into a scene, with the matte holding while the subject moves.
|
||||
|
||||
@@ -157,25 +159,25 @@ Days 20 to 30 move from one composition to a repeatable pipeline: reusable block
|
||||
|
||||
</Card>
|
||||
<Card title="Day 22 — Components Catalog" href="https://x.com/HyperFrames_/status/2081798071353278651">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-22.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-22.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-22-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-22.jpg" />
|
||||
|
||||
Add reusable scenes and effects instead of rebuilding them each time.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 23 — Templates and variables" href="https://x.com/HyperFrames_/status/2082197435246600341">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-23.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-23.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-23-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-23.jpg" />
|
||||
|
||||
Turn one composition into repeatable versions. Plays in full [above](#three-lessons-in-full).
|
||||
|
||||
</Card>
|
||||
<Card title="Day 24 — Color grading" href="https://x.com/HyperFrames_/status/2082536413829235004">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-24.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-24.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-24-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-24.jpg" />
|
||||
|
||||
Correct or stylize images and footage in code, and bring your own LUT packs.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 25 — Prompt Guide" href="https://x.com/HyperFrames_/status/2082892893027749917">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-25.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-25.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-25-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-25.jpg" />
|
||||
|
||||
Find practical language and examples for directing an agent. The written guide lives in these docs, at [Prompting overview](/prompting/overview).
|
||||
|
||||
@@ -187,19 +189,19 @@ Days 20 to 30 move from one composition to a repeatable pipeline: reusable block
|
||||
|
||||
</Card>
|
||||
<Card title="Day 27 — Deploy" href="https://x.com/HyperFrames_/status/2083633492894900456">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-27.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-27.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-27-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-27.jpg" />
|
||||
|
||||
Run rendering on your own cloud infrastructure. See [Deploy](/guides/deploy) for the four render routes.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 28 — Contribute to the Catalog" href="https://x.com/HyperFrames_/status/2084070152975634743">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-28.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-28.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-28-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-28.jpg" />
|
||||
|
||||
Publish reusable building blocks for other creators. The [Catalog](/catalog) lists what has landed so far.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 29 — Components update" href="https://x.com/HyperFrames_/status/2084338269194732003">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-29.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-29.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
<HoverVideo className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-29-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-29.jpg" />
|
||||
|
||||
Combine the expanded component set in a single project.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user