WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.
weread-year-in-review-video-template is a HyperFrames video template for producing a vertical 9:16 annual reading report as an HTML-to-MP4 composition, inspired by the WeRead app's editorial visual language. It solves the problem of turning personal reading data — reading time, active days, bookshelf and completion stats, notes, interest keywords, and a reading persona — into a polished, shareable year-in-review story video with a warm paper aesthetic and book-page metaphors.
The skill ships a template.html asset, an example.html preview, and a checklist reference. The documented workflow is to copy the template to index.html, replace the default data in a `REPORT` object (owner/title, reading hours and active days, bookshelf and completion stats, note composition, interest keywords, and reading persona/share line), preserve a 12-scene timeline at 1080x1920, and keep the WeRead-inspired look of warm paper background, ink-blue typography, restrained green accents, and book-page/bookmark/highlight/note-card motifs. It stresses deterministic motion: direct data-start, data-duration, and data-track-index attributes, no unseeded randomness, no infinite loops, and no dependence on scroll, hover, localStorage, or runtime class discovery. A bundled checklist enforces the 9:16 format, exactly 12 non-overlapping scenes, deterministic timeline, and avoidance of sandbox-hostile APIs like localStorage, alert, and prompt, plus static fallback if the animation library fails.
It targets designers, content creators, and readers who want a WeRead/Goodreads/Readwise-style annual reading recap video, including Chinese-language reports. Use cases include personal reading dashboards, book-note recaps, book-club summaries, and shareable social sharing frames. It is a self-contained visual template that deliberately avoids risky browser APIs.
A vertical 9:16 (1080x1920) HTML-to-MP4 HyperFrames video with exactly 12 scenes presenting an annual reading report — reading time, active days, bookshelf and completion stats, notes, keywords, and a final reading persona card.
Copy assets/template.html to index.html and replace the default data in the REPORT object (owner/title, reading hours, active days, bookshelf and completion stats, note composition, interest keywords, and reading persona/share line), keeping the 12-scene timeline and WeRead-inspired visual language.
Yes. The checklist notes the template can be adapted to Goodreads, Readwise, Notion reading logs, book clubs, or personal learning recaps without changing the visual system, and it supports Chinese editorial typography.
Motion must be deterministic — explicit data-start/data-duration/data-track-index attributes, no unseeded randomness, no infinite loops or repeat: -1, and no dependence on scroll, hover, or localStorage. The template also avoids sandbox-hostile APIs like localStorage, sessionStorage, alert, confirm, and prompt, and keeps a readable static fallback if GSAP fails to load.
Per the P0 checklist: a directly openable template, a working example preview, correct frontmatter mode/surface/type, vertical 9:16 with exactly 12 visible non-overlapping scenes, a deterministic timeline, and legible stats after mobile video compression.
Quick Setup:
.claude/skills/Repository
nexu-io/open-design