# Frame catalogue Generated from published content at 2026-10-07T02:19:56.155Z. Private visitor access is not represented here. Consult each linked page for the current state. ## Published works ### Fieldnotes — A quiet newsletter signup - Page: [Fieldnotes — A quiet newsletter signup](https://design.yrzhe.top/works/fieldnotes-newsletter-letter) - Type: Design - Tags: Typography, Editorial - Source archive: public download. - Updated: 2026-10-06T17:25:18.602Z A type-led subscription layout pairs a serif headline and a minimal email field with an illustrated folded letter. Terracotta, olive and warm paper colors carry through the short editorial notes beneath the form. Usage terms: MIT. Preserve the included copyright and license notice. ### Fieldnotes — An autumn issue and contents - Page: [Fieldnotes — An autumn issue and contents](https://design.yrzhe.top/works/fieldnotes-issue-contents) - Type: Design - Tags: Typography, Editorial - Source archive: public download. - Updated: 2026-10-06T17:25:11.527Z An olive arch illustration sits beside a large serif issue title on warm ivory. Four numbered essays form a compact contents list with descriptions and page numbers, sharing the same typography and fine-rule structure. Usage terms: MIT. Preserve the included copyright and license notice. ### Fieldnotes — A ruled editorial archive - Page: [Fieldnotes — A ruled editorial archive](https://design.yrzhe.top/works/fieldnotes-archive-index) - Type: Design - Tags: Typography, Editorial - Source archive: public download. - Updated: 2026-10-06T17:25:04.136Z A large serif heading and a paper-and-circle illustration introduce six archive entries. Thin horizontal rules align story titles with their subject and publication date, keeping the directory open and restrained. Usage terms: MIT. Preserve the included copyright and license notice. ### Fieldnotes — A spacious article reading layout - Page: [Fieldnotes — A spacious article reading layout](https://design.yrzhe.top/works/fieldnotes-article-reading) - Type: Design - Tags: Typography, Editorial - Source archive: public download. - Updated: 2026-10-06T17:24:56.909Z An oversized serif headline introduces a two-column article on warm ivory. Terracotta architectural forms sit beside an olive pull quote, with fine rules and compact metadata organizing the reading experience. Usage terms: MIT. Preserve the included copyright and license notice. ### Three distributions in boxes and whiskers - Page: [Three distributions in boxes and whiskers](https://design.yrzhe.top/works/box-plot) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:42:01.781Z Three colored boxes summarize sample distributions with median lines and whiskers. Hover a box to inspect its group and summary statistics. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Three targets tracked with bars and markers - Page: [Three targets tracked with bars and markers](https://design.yrzhe.top/works/bullet-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:41:52.245Z Three horizontal tracks compare colored measures with background ranges and vertical target markers. Hover a range, measure or marker to read its value. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Six series flow through stacked bands - Page: [Six series flow through stacked bands](https://design.yrzhe.top/works/stream-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:41:42.580Z Six colored series overlap as flowing bands across sixteen positions. Hover a band to highlight its series and inspect the values at the selected position. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### A hierarchy nested in colored circles - Page: [A hierarchy nested in colored circles](https://design.yrzhe.top/works/circle-packing) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:41:33.687Z Colored circles nest inside larger parent circles to form a hierarchy. Circle area reflects each value; hovering a circle reveals its name and value. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Three groups collect into dot swarms - Page: [Three groups collect into dot swarms](https://design.yrzhe.top/works/swarm-plot) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:41:24.051Z Small circles gather into three vertical groups on a shared value scale. Hover a dot to reveal its group and sample value. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Three shares fill a waffle grid - Page: [Three shares fill a waffle grid](https://design.yrzhe.top/works/waffle-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:41:13.728Z Three colored shares fill a tiled grid from the bottom, leaving unused cells gray. Hover a colored tile to read its category and value. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Seven groups linked by curved ribbons - Page: [Seven groups linked by curved ribbons](https://design.yrzhe.top/works/chord-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:41:03.817Z Seven colored arc groups surround a set of curved ribbons. Hover a group or connection to reveal the related names and values while the other connections fade. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Colored rectangles nest into a treemap - Page: [Colored rectangles nest into a treemap](https://design.yrzhe.top/works/treemap-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:40:53.767Z Colored rectangles nest inside a hierarchy, with area and labels tied to each branch value. Hover a rectangle to reveal its name and value. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Two charts share a moving crosshair - Page: [Two charts share a moving crosshair](https://design.yrzhe.top/works/synced-crosshairs) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:40:44.149Z A stacked area chart and a reversed line chart share the same crosshair position. Move over either chart, choose a preset or adjust the range slider to move the shared readout; Clear removes the forced position. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Named nodes settle into a linked network - Page: [Named nodes settle into a linked network](https://design.yrzhe.top/works/force-layout-graph) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:40:35.080Z Colored circular nodes and labeled links form a force-directed network. Drag a node to move it through the diagram while its connected links follow. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Flow branches expand with a click - Page: [Flow branches expand with a click](https://design.yrzhe.top/works/expandable-sankey) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:40:25.785Z Colored ribbons carry weekly expenditure from a total into category branches. Click a plus-marked node to expand its subcategories, then click its minus marker to collapse the same branch. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Green status blocks punctuated by alerts - Page: [Green status blocks punctuated by alerts](https://design.yrzhe.top/works/status-tracker) - Type: Interaction - Tags: Charts - Source archive: public download. - Updated: 2026-10-06T16:40:16.659Z A dense band of small green blocks is interrupted by red, gray and yellow statuses. Hover or tap a block to reveal its status label. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Four category shares around a target - Page: [Four category shares around a target](https://design.yrzhe.top/works/category-bar) - Type: Interaction - Tags: Charts - Source archive: public download. - Updated: 2026-10-06T16:40:06.855Z Four colored segments divide a horizontal total, with boundary values above the bar. A narrow marker sits at 65; hovering the marker opens its readout. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Page visits ranked in horizontal bars - Page: [Page visits ranked in horizontal bars](https://design.yrzhe.top/works/bar-list) - Type: Interaction - Tags: Charts - Source archive: public download. - Updated: 2026-10-06T16:39:55.726Z Five page paths are ranked by visit count. Pale blue bars vary in length while labels and numeric values remain aligned in separate columns. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Three compact charts share a trend - Page: [Three compact charts share a trend](https://design.yrzhe.top/works/spark-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:39:45.894Z Three compact charts show the same two monthly series as lines, filled areas and grouped columns. Blue and cyan marks share a compact frame without axis labels. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Earnings split around a blue donut - Page: [Earnings split around a blue donut](https://design.yrzhe.top/works/earnings-donut) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:39:35.624Z A blue donut divides three channels around a total readout. Hovering a segment reveals its label and value; matching rows summarize channel earnings and growth. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Sales totals stack into blue columns - Page: [Sales totals stack into blue columns](https://design.yrzhe.top/works/sales-card) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:39:22.733Z Three blue segments stack into a column for each month beneath a sales total and growth badge. Hovering a column opens a readout for earnings, profit and expense. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Monthly orders compared year over year - Page: [Monthly orders compared year over year](https://design.yrzhe.top/works/orders-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:39:09.757Z Paired monthly columns compare this year's orders with the year before. Hovering a month changes the headline count, comparison and percentage chip, then leaving the plot restores the annual total. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Funds flow through allocation branches - Page: [Funds flow through allocation branches](https://design.yrzhe.top/works/allocation-sankey) - Type: Interaction - Tags: Charts, Canvas - Source archive: public download. - Updated: 2026-10-06T16:38:56.371Z Illustrative fund allocations flow from an inflow through three asset classes into three strategy groups. Hovering a node or link reveals its label and amount, while summary figures sit beneath the diagram. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### A dashed guide follows monthly columns - Page: [A dashed guide follows monthly columns](https://design.yrzhe.top/works/hover-trace-bar) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:38:43.600Z A row of monthly columns highlights the selected value while the other columns fade. Hovering a column moves a dashed horizontal guide and changes the animated headline and month label. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Revenue columns beneath a shaded trend - Page: [Revenue columns beneath a shaded trend](https://design.yrzhe.top/works/composed-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:38:30.230Z Monthly revenue columns sit beneath a shaded area and a trend line. Hovering the plot reveals the revenue and run-rate values for the selected month. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Six channels traced in concentric rings - Page: [Six channels traced in concentric rings](https://design.yrzhe.top/works/ring-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:38:16.944Z Six colored arcs fill concentric circular tracks, with channel names and values in a matching legend. Hovering a ring or legend row brings that channel into focus and updates the center readout. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Daily activity in a weekly heatmap - Page: [Daily activity in a weekly heatmap](https://design.yrzhe.top/works/heatmap-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:38:02.806Z Shaded square cells arrange daily activity into seven rows of weeks. Hover a cell to read its date and contribution count, or move across the level legend to highlight matching values. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Sessions and conversions plotted as dots - Page: [Sessions and conversions plotted as dots](https://design.yrzhe.top/works/scatter-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T16:37:49.637Z Two sets of dots compare sessions and conversions across six months. Hovering a point reveals its date and series values alongside a vertical guide. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Price history opens into target paths - Page: [Price history opens into target paths](https://design.yrzhe.top/works/price-target-fan) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T13:34:19.387Z A black history line branches into high, mean and low price targets. Scrub the history or inspect a target to reveal its value and analyst count. The data is illustrative. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Monthly returns in a color grid - Page: [Monthly returns in a color grid](https://design.yrzhe.top/works/returns-calendar) - Type: Interaction - Tags: Charts - Source archive: public download. - Updated: 2026-10-06T13:34:08.698Z A compact matrix places monthly returns alongside yearly totals, with green gains and pink losses. Select cells to inspect a month or compare a date range. All values are illustrative. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Activity across a calendar grid - Page: [Activity across a calendar grid](https://design.yrzhe.top/works/heat-calendar) - Type: Interaction - Tags: Charts - Source archive: public download. - Updated: 2026-10-06T13:33:55.262Z Small teal squares show daily activity across several months. Select dates to mark a range and inspect the activity behind each cell. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Revenue steps down to net income - Page: [Revenue steps down to net income](https://design.yrzhe.top/works/waterfall) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T13:19:38.595Z A waterfall bridges revenue, costs and net income. Red floating bars show deductions, green shows a gain, and gray columns mark subtotals; hover a bar to inspect its value. Usage terms: Apache-2.0. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Revenue compared with the year before - Page: [Revenue compared with the year before](https://design.yrzhe.top/works/revenue-card) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T13:19:21.370Z A lime line and soft area fill track monthly revenue above a dashed previous-year series. Hover a month to replace the headline total with that month’s revenue and year-over-year comparison. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Revenue rises in isometric columns - Page: [Revenue rises in isometric columns](https://design.yrzhe.top/works/isometric-bar) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T13:19:05.595Z Seven faceted columns compare monthly revenue, with the peak month highlighted in green. Hover a column to reveal its month and value. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Monthly totals stack into square columns - Page: [Monthly totals stack into square columns](https://design.yrzhe.top/works/grid-bar) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T13:18:49.253Z Black square cells stack into twelve monthly columns against pale grid tracks. A large total and peak-month label sit above the monochrome chart. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Campaigns overlap on five performance axes - Page: [Campaigns overlap on five performance axes](https://design.yrzhe.top/works/radar-chart) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T13:18:31.276Z Four colored polygons compare engagement, pages per session, session duration, conversion and retention. Hover a campaign in the legend to emphasize its shape. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Revenue fills a segmented gauge - Page: [Revenue fills a segmented gauge](https://design.yrzhe.top/works/gauge-chart) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T13:18:15.831Z An arc of narrow segments frames a large revenue figure. Dark filled segments contrast with the pale remainder, with the run-rate label centered below. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Daily prices in red and green - Page: [Daily prices in red and green](https://design.yrzhe.top/works/candlestick-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T13:17:57.666Z Green and red candles plot daily open, high, low and close values. Hover a candle to inspect its prices. The sample series is illustrative. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Liquidity across time and price - Page: [Liquidity across time and price](https://design.yrzhe.top/works/liquidity-heatmap) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T13:17:52.921Z Blue cells and brighter green-to-yellow bands map simulated order depth across price levels and time, with a white price line running through the grid. Hover a cell to inspect its quantity, then resimulate to see the distribution change. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### A price line advances in real time - Page: [A price line advances in real time](https://design.yrzhe.top/works/live-line-chart) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T13:17:40.244Z A dark line advances as simulated prices arrive, with a glowing endpoint and a faint fill beneath it. The time axis and current-price label follow the moving series. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### From first visit to payment - Page: [From first visit to payment](https://design.yrzhe.top/works/funnel-chart) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T13:17:30.186Z Five stages shade from violet to teal and narrow from visitors to subscribers. Switch between vertical and horizontal layouts, change the cohort, or inspect a stage to see conversion and drop-off. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Traffic flows from source to outcome - Page: [Traffic flows from source to outcome](https://design.yrzhe.top/works/sankey-chart) - Type: Interaction - Tags: Charts, SVG - Source archive: public download. - Updated: 2026-10-06T13:17:21.370Z Gray ribbons connect acquisition channels, visited pages and conversion outcomes. Hover a source to emphasize its connected flows and inspect session counts. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Revenue branches into concentric rings - Page: [Revenue branches into concentric rings](https://design.yrzhe.top/works/sunburst-chart) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T13:17:04.986Z Gray concentric segments divide revenue into products, services and channels. Hover to inspect a branch, then click a segment to zoom into its hierarchy. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Bids and asks in motion - Page: [Bids and asks in motion](https://design.yrzhe.top/works/order-book) - Type: Interaction - Tags: Charts, Animation - Source archive: public download. - Updated: 2026-10-06T13:15:56.182Z Red asks and green bids update around a central market price. Pause the simulated order book to inspect its depth, then advance it one step at a time. Usage terms: MIT. Preserve the included license and copyright notices. Third-party packages retain their own licenses. ### Fieldnotes — A quiet editorial layout - Page: [Fieldnotes — A quiet editorial layout](https://design.yrzhe.top/works/fieldnotes-room-for-less) - Type: Design - Tags: Typography, Editorial - Source archive: public download. - Updated: 2026-10-06T06:27:50.963Z Oversized serif typography sits beside a terracotta arch illustration on warm ivory. Fine rules separate a compact issue index from the open hero composition, with olive italics and small captions providing contrast. An original layout for a fictional publication. Usage terms: MIT. License notice included in LICENSE. ### Colored shares shift between bars and areas - Page: [Colored shares shift between bars and areas](https://design.yrzhe.top/works/shifting-channel-mix) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T06:27:49.011Z Five muted colors divide each month into proportional shares. Switch between stacked bars and filled areas, inspect a month with the pointer or arrow keys, and pin a channel in the legend. Uses illustrative data. Usage terms: MIT. Required copyright and license notices are included in LICENSE. ### Five product rankings trade places - Page: [Five product rankings trade places](https://design.yrzhe.top/works/rankings-in-motion) - Type: Interaction - Tags: Charts, SVG, Animation - Source archive: public download. - Updated: 2026-10-06T06:27:47.036Z Five colored paths connect monthly rankings. Inspect a point, pin a product in the legend, or change the snapshot to watch the paths and rank dots move. Uses illustrative data. Usage terms: MIT. Required copyright and license notices are included in LICENSE. ### Flow-1 — A Motion Study - Page: [Flow-1 — A Motion Study](https://design.yrzhe.top/works/flow1-motion-study) - Type: Video - Tags: Motion study, HyperFrames, SVG - Source archive: request access from the work page. - Updated: 2026-10-06T04:00:30.982Z A 74.5-second reconstruction of Laminar’s Flow-1 launch film, built with editable SVG, measured motion tracks and a native HyperFrames timeline. The study follows agent traces, scanning interfaces, kinetic typography and a field of diagnostic signals. Reference-derived cloud layers and the original soundtrack accompany the code-driven scenes. Source is available through the follow-and-request flow. Usage terms: Independent study of Laminar’s Flow-1 film. Reference soundtrack, isolated cloud effects and branding retain their original ownership. Cloud textures use WebP compression for online distribution. JetBrains Mono’s SIL Open Font License is included. Access does not grant additional commercial or redistribution rights to third-party assets; see LICENSE-NOTICE.md. ### Cue — A Motion Study - Page: [Cue — A Motion Study](https://design.yrzhe.top/works/cue-motion-study) - Type: Video - Tags: Motion study, Canvas, Character animation - Source archive: public download. - Updated: 2026-10-05T18:34:27.885Z A 75-second code-driven reconstruction of the Cue / Manus launch film, exploring expressive agents, connected app interfaces and a scan-to-agent particle transition. Includes the complete study, a synchronized comparison and the credited original in References. Editable source is free to download. QR encoding is omitted; the study retains reference artwork and audio, with some UI and photographic motion differences. Source package: editable Canvas composition, vector motion data, runtime assets, locked npm dependency and rendering tools. Requires Node.js 22\+, npm, FFmpeg and Playwright Chromium; see README for setup. Free download; third-party artwork, branding and audio retain their original ownership. No additional commercial rights are granted. Usage terms: Free download does not include a blanket software or commercial-use license. Cue / Manus artwork, branding, app icons, selected interface and photographic material, and the reference soundtrack retain their respective ownership. See LICENSE-NOTICE.md and assets/manifest.json. ### Trust Wallet — Swap in Motion - Page: [Trust Wallet — Swap in Motion](https://design.yrzhe.top/works/trust-wallet-swap-motion-study) - Type: Video - Tags: Motion study, Remotion, 3D - Source archive: request access from the work page. - Updated: 2026-10-05T18:24:43.265Z A motion study of Trust Wallet’s swap announcement, rebuilt with Remotion, React and Three.js. This teal variation explores kinetic type, interface transitions and playful 3D scenes. Usage terms: Independent study of Trust Wallet’s swap film. Reference soundtrack, branding, fonts and other third-party assets retain their respective rights; this package does not grant commercial reuse rights to them. ### Renoise — Every Model, One Studio - Page: [Renoise — Every Model, One Studio](https://design.yrzhe.top/works/renoise-product-film) - Type: Video - Tags: AI original, Product film, Generative media - Source archive: public download. - Updated: 2026-10-05T18:24:41.604Z An original AI-made product film for Renoise. A glass butterfly moves through a studio of models, agent workflows and creative scenarios, combining generated footage with procedural animation. Usage terms: Read SOURCES.md before reuse. Included branding, fonts, media and audio retain their respective rights; this download is not a blanket commercial license. ### Whop — A Motion Study - Page: [Whop — A Motion Study](https://design.yrzhe.top/works/moksh-whop-motion-study) - Type: Video - Tags: Product Motion, Canvas, WebGL - Source archive: public download. - Updated: 2026-10-05T18:24:39.884Z A 25-second motion study based on Moksh Choudhary’s Whop film. Canvas draws typography and interface elements; WebGL creates flowing color fields and halos. Includes editable source, asset notes and rendering instructions. The study retains the reference soundtrack for comparison; the original film and post appear below. Usage terms: Independent study of Moksh Choudhary’s Whop film. Some imagery derives from the reference; brand marks and third-party assets retain their original attribution. See assets/SOURCES.md and included font notices. Comparison exports use separately retrieved reference media for study only. ### Jockey — A Motion Study - Page: [Jockey — A Motion Study](https://design.yrzhe.top/works/jockey-motion-study) - Type: Video - Tags: Motion study, Canvas, Product film - Source archive: request access from the work page. - Updated: 2026-10-05T18:24:37.906Z A 93-second code-driven reconstruction of Aizal Khan’s Jockey film, exploring video-card choreography, semantic overlays and conversational interfaces. Includes the study, a synchronized side-by-side comparison and the credited original in References. The reconstruction retains the reference soundtrack; card interiors use still images, and some motion and lighting details differ. Editable source is available on request. Usage terms: Independent reconstruction of Aizal Khan’s Jockey film. Media crops, backgrounds, reference soundtrack and branding retain their original ownership. Inter’s SIL Open Font License is included; other third-party rights are not granted. ### Havyn — A Motion Study - Page: [Havyn — A Motion Study](https://design.yrzhe.top/works/havyn-motion-study) - Type: Video - Tags: Motion study, Canvas, Product film - Source archive: public download. - Updated: 2026-10-05T18:24:34.520Z A 55-second code-driven reconstruction of Havyn’s launch film, exploring moving product ribbons, kinetic typography and perspective phone interfaces. Includes a synchronized comparison and the credited original in References. Editable source is free to download. The study retains the reference soundtrack; type, device materials and small interface details differ from the original. Usage terms: Independent reconstruction, not the original Havyn production project. Photograph crops, badges and reference soundtrack retain their original ownership. The download grants no additional rights to third-party media, music or branding. ### Fireworks — A Motion Study - Page: [Fireworks — A Motion Study](https://design.yrzhe.top/works/fireworks-motion-study) - Type: Video - Tags: Motion study, Canvas, Typography - Source archive: request access from the work page. - Updated: 2026-10-05T18:24:32.720Z A code-driven reconstruction of MotionByLeo’s Fireworks film. Typography, diagrams and interface scenes are drawn on Canvas with a deterministic timeline. See the original film in References. Usage terms: Independent study of MotionByLeo’s Fireworks film. Reference soundtrack, branding, fonts and third-party assets retain their respective rights; the package does not grant commercial reuse rights to them. ### Bloome — From Brief to Launch - Page: [Bloome — From Brief to Launch](https://design.yrzhe.top/works/bloome-launch-film) - Type: Video - Tags: AI original, Product film, Animation - Source archive: public download. - Updated: 2026-10-05T18:24:31.143Z An original AI-made launch film for Bloome. A team of agents moves from the first brief through debate, planning and parallel work to a finished idea. Built with code-driven animation and generated voiceover. Usage terms: Read SOURCES.md before reuse. Included branding, fonts, media and audio retain their respective rights; this download is not a blanket commercial license. Voiceover was generated on an ElevenLabs personal/noncommercial plan; commercial voice rights are not included. ## Collections ### Fieldnotes Editorial [View collection](https://design.yrzhe.top/packages/editorial-systems) Warm ivory paper, oversized serif headlines, olive italics and terracotta illustrations. Fine rules, asymmetrical grids and generous spacing tie together the homepage, article, archive, issue contents and newsletter compositions. Each layout includes free editable source. - [Fieldnotes — A quiet editorial layout](https://design.yrzhe.top/works/fieldnotes-room-for-less) - [Fieldnotes — A spacious article reading layout](https://design.yrzhe.top/works/fieldnotes-article-reading) - [Fieldnotes — A ruled editorial archive](https://design.yrzhe.top/works/fieldnotes-archive-index) - [Fieldnotes — An autumn issue and contents](https://design.yrzhe.top/works/fieldnotes-issue-contents) - [Fieldnotes — A quiet newsletter signup](https://design.yrzhe.top/works/fieldnotes-newsletter-letter) ### Neutral Precision [View collection](https://design.yrzhe.top/packages/charts-in-motion) Geist typography, white surfaces and fine gray rules form a restrained interface style. Compact labels and a shared tooltip treatment carry through the graphics, with color reserved for data series and status accents. - [Revenue columns beneath a shaded trend](https://design.yrzhe.top/works/composed-chart) - [Revenue branches into concentric rings](https://design.yrzhe.top/works/sunburst-chart) - [Traffic flows from source to outcome](https://design.yrzhe.top/works/sankey-chart) - [A price line advances in real time](https://design.yrzhe.top/works/live-line-chart) - [Daily prices in red and green](https://design.yrzhe.top/works/candlestick-chart) - [Revenue fills a segmented gauge](https://design.yrzhe.top/works/gauge-chart) - [Campaigns overlap on five performance axes](https://design.yrzhe.top/works/radar-chart) - [Sessions and conversions plotted as dots](https://design.yrzhe.top/works/scatter-chart) - [Daily activity in a weekly heatmap](https://design.yrzhe.top/works/heatmap-chart) - [Six channels traced in concentric rings](https://design.yrzhe.top/works/ring-chart) ### Paper & Type [View collection](https://design.yrzhe.top/packages/paper-and-type) Warm paper surfaces, expressive headline typography and thin divider rules. Muted ochre, teal and clay accents connect the compositions, with generous space around the headline and a carefully bounded visual area. - [Five product rankings trade places](https://design.yrzhe.top/works/rankings-in-motion) - [Colored shares shift between bars and areas](https://design.yrzhe.top/works/shifting-channel-mix) ### Color Studio [View collection](https://design.yrzhe.top/packages/color-studio) Color-led graphics on open white surfaces, supported by consistent Inter typography and fine gray labels. Filled shapes, ribbons and layered bands explore different data palettes within the same restrained plotting treatment. - [Colored rectangles nest into a treemap](https://design.yrzhe.top/works/treemap-chart) - [Seven groups linked by curved ribbons](https://design.yrzhe.top/works/chord-chart) - [Three shares fill a waffle grid](https://design.yrzhe.top/works/waffle-chart) - [Three groups collect into dot swarms](https://design.yrzhe.top/works/swarm-plot) - [A hierarchy nested in colored circles](https://design.yrzhe.top/works/circle-packing) - [Six series flow through stacked bands](https://design.yrzhe.top/works/stream-chart) - [Three targets tracked with bars and markers](https://design.yrzhe.top/works/bullet-chart) - [Three distributions in boxes and whiskers](https://design.yrzhe.top/works/box-plot) ### Clean Essentials [View collection](https://design.yrzhe.top/packages/clean-essentials) Inter typography, compact spacing and minimal framing define a quiet interface style. Subtle blue fills and consistent semantic status colors support lightweight indicators without heavy surrounding panels. - [Page visits ranked in horizontal bars](https://design.yrzhe.top/works/bar-list) - [Three compact charts share a trend](https://design.yrzhe.top/works/spark-chart) - [Four category shares around a target](https://design.yrzhe.top/works/category-bar) - [Green status blocks punctuated by alerts](https://design.yrzhe.top/works/status-tracker) ### Airy Interface [View collection](https://design.yrzhe.top/packages/airy-interface) Google Sans text and Space Grotesk headings share a bright, rounded interface style. Generous internal spacing, quiet neutral labels and clear blue accents create a light and open treatment. - [Sales totals stack into blue columns](https://design.yrzhe.top/works/sales-card) - [Earnings split around a blue donut](https://design.yrzhe.top/works/earnings-donut) ### Open Canvas [View collection](https://design.yrzhe.top/packages/open-canvas) Open white surfaces, Inter typography and fine supporting labels give the graphics room to breathe. Thin connections, precise markers and restrained framing carry the same visual treatment across different compositions. - [Flow branches expand with a click](https://design.yrzhe.top/works/expandable-sankey) - [Revenue steps down to net income](https://design.yrzhe.top/works/waterfall) - [Named nodes settle into a linked network](https://design.yrzhe.top/works/force-layout-graph) - [Two charts share a moving crosshair](https://design.yrzhe.top/works/synced-crosshairs) ### Soft Panel [View collection](https://design.yrzhe.top/packages/soft-panel) Rounded white panels, Inter typography and a consistent hierarchy of headlines, captions and supporting labels. Subtle borders and restrained accent colors create a soft, spacious dashboard treatment. - [Revenue compared with the year before](https://design.yrzhe.top/works/revenue-card) - [Monthly orders compared year over year](https://design.yrzhe.top/works/orders-chart) ### Graphic Geometry [View collection](https://design.yrzhe.top/packages/graphic-geometry) Crisp Inter typography, small technical captions and structured geometric marks on light surfaces. Fine axes and neutral framing balance repeated grids, dimensional shapes and softly colored flows. - [Revenue rises in isometric columns](https://design.yrzhe.top/works/isometric-bar) - [Monthly totals stack into square columns](https://design.yrzhe.top/works/grid-bar) - [A dashed guide follows monthly columns](https://design.yrzhe.top/works/hover-trace-bar) - [Funds flow through allocation branches](https://design.yrzhe.top/works/allocation-sankey) ### Quiet Surface [View collection](https://design.yrzhe.top/packages/quiet-surface) Quiet near-white surfaces, Geist typography and muted labels provide a compact visual foundation. Subtle dividers, soft tooltip surfaces and restrained motion keep both sparse plots and dense data grids visually related. - [Activity across a calendar grid](https://design.yrzhe.top/works/heat-calendar) - [From first visit to payment](https://design.yrzhe.top/works/funnel-chart) - [Liquidity across time and price](https://design.yrzhe.top/works/liquidity-heatmap) - [Bids and asks in motion](https://design.yrzhe.top/works/order-book) - [Monthly returns in a color grid](https://design.yrzhe.top/works/returns-calendar) - [Price history opens into target paths](https://design.yrzhe.top/works/price-target-fan) [Overview](https://design.yrzhe.top/index.md) · [Source access and usage](https://design.yrzhe.top/sources.md) · [Agent index](https://design.yrzhe.top/llms.txt)