Repository navigation
feat: motion graphics category and September components - #287
Merged
Merged
Conversation
Motion Graphics, a new docs category: - bauhaus-build: flat Bauhaus shapes tumble corner over corner into a frieze - swiss-grid: Swiss title card whose rules are sized by their own text - mondrian-split: De Stijl grid that reflows and hands the frame to the next scene - truchet-flip: Truchet tiles snap a quarter turn and reconnect into rings - trim-burst: trim-path stroke burst accent - speed-lines: velocity-driven streaks with an inertial squash-and-bounce landing, plus a focus impact mode - squiggle: a live line whose wave swims forward as it draws Product pieces: - keystroke (effects): physical keycaps pressing shortcuts in real order - code-morph (ui-blocks): Magic Move for code with identity-preserving tokens - agent-run (ai): brand-neutral agent trace with bursty markdown streaming Registry artifacts, the preview manifest and the changelog entry are not regenerated in this commit. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZicJXbno5Y6fXtvSBN4S7
Heavy display type from a code-built motion showreel, each isolating one trick: - selection-snap: a thin word snaps into a design-tool selection while it goes from Thin to Black on a variable font; handles pop, a W × H badge counts up - lead-bar-type: letters chase a cursor bar along the baseline, smeared, land with an overshoot; the bar settles into an underline clear of descenders - echo-stack: the word focuses in while outline copies unfold above and below and drift in a seamless loop - type-wall: rows of one word fill the frame in heavy, narrow and outline faces, alternating directions at seeded speeds around an accent band - ring-text: a phrase runs around a tilted, spinning 3D band, mirrored on the far side - period-drop: the word rises out of its line, a dot falls, bounces twice with squash and stretch and settles as the period All render as DOM text with Inter from @remotion/google-fonts (one variable file, so weights are continuous). Outlines come from an SVG erode filter because a text stroke draws the variable font's overlapping contours. Each component exports pure timeline functions covered by tests. Docs pages, typography index and meta, registry entries, preview loaders and a changelog entry are included. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZicJXbno5Y6fXtvSBN4S7
Runs registry:build and manifest:build for every component added on this branch, including the ten from the motion graphics commit that were left out of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZicJXbno5Y6fXtvSBN4S7
Drop the Swiss title card from the Motion Graphics category along with its registry item, preview entries, generated artifacts, docs page, design doc and the avoidWhen reference on the bauhaus-build page. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Drop the Lead Bar Type typography component along with its registry item, preview entries, generated artifacts, docs page and typography index card. The showreel changelog entry and design doc now cover five components. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Add the motion graphics changelog entry, point the hero badge at it and reset the NEW sidebar badges to the components introduced on this branch. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZicJXbno5Y6fXtvSBN4S7
Type built the way a motion designer builds it in After Effects: - outline-trace: every glyph contour draws itself as a trim path, letter by letter, then the fill wipes up and the stroke fades into it - glyph-anatomy: metric guides, anchors along each contour and Bézier handles that pull straight segments into curves, as in a font editor - stripe-type: IBM-style bands slide in from alternating sides and lock, stay striped or close into solid type, and pass on through - path-ride: text rides a self-drawing SVG path, then the path pulls taut and the text settles on a straight, centered baseline - type-repeater: copies of a word unfold into a tunnel, spiral or fan behind it, breathe and fold back outline-trace and glyph-anatomy parse real outlines with opentype.js, looking glyphs up per character because full shaping hits GSUB lookups opentype.js cannot run on Inter. A mask hides strokes inside the silhouette where variable-font instances keep overlapping contours. The other three are DOM text with Inter from @remotion/google-fonts. Each component exports pure timeline functions covered by tests; docs pages, a Vector type section on the typography index, registry entries, preview loaders and a changelog entry are included. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZicJXbno5Y6fXtvSBN4S7
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZicJXbno5Y6fXtvSBN4S7
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
fumadocs-mdx pinned a nested zod@4.3.6 while fumadocs-core resolved the root 4.4.3, and comparing the two schema types in source.config.ts sent tsc into unbounded instantiation on a clean install. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fourteen new registry components plus a new Motion Graphics docs category, a changelog, and a refreshed hero badge.
Motion Graphics (new category,
content/docs/motion-graphics/)bauhaus-build: flat Bauhaus shapes tumble corner over corner into a frieze, then rebuild around an open title bandmondrian-split: a seeded De Stijl grid builds, reflows like rubber, and one cell takes over the frame as the next scenetruchet-flip: Truchet tiles snap a quarter turn in a wave and reconnect into rings, a field or a circletrim-burst: trim-path stroke burst accentspeed-lines: velocity-driven streaks with an inertial squash-and-bounce landing, plus a manga focus impact modesquiggle: a live line whose wave swims forward as it draws, in wave, zigzag, loop or coil shapesProduct pieces
keystroke(Effects): physical keycaps pressing shortcuts in real order, synced to remocn-ui stepscode-morph(UI Blocks): Magic Move for code with identity-preserving token motionagent-run(AI): brand-neutral agent trace with tool calls on a real-seconds timer and bursty markdown streamingShowreel type (Typography)
selection-snap,echo-stack,type-wall,ring-text,period-dropRemoved during review
swiss-gridandlead-bar-type: all references, generated artifacts and manifest entries are goneSite
2026-09-25-showreel-typeand2026-09-26-motion-graphicsNEW_BADGE_PATHSreset to the components introduced on this branchNotes
registry-artifacts/andregistry/__manifest__.tsby hand.registry:checkandmanifest:checkin CI will confirm they match generator output.remotion. The showreel type components also depend on@remotion/google-fonts.🤖 Generated with Claude Code