From 5361b9e10c80c787527ffa25a0db01002ddebbf0 Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Wed, 5 Aug 2026 00:36:07 -0700 Subject: [PATCH] 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. --- docs/snippets/hover-video.jsx | 62 +++++++++++++++++++++++++++++++++++ docs/thirty-days.mdx | 38 +++++++++++---------- 2 files changed, 82 insertions(+), 18 deletions(-) create mode 100644 docs/snippets/hover-video.jsx diff --git a/docs/snippets/hover-video.jsx b/docs/snippets/hover-video.jsx new file mode 100644 index 000000000..a52660c91 --- /dev/null +++ b/docs/snippets/hover-video.jsx @@ -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 `