201 entries, 447 steal-notes — 281 by hand, 166 model drafts. 201 results have public source URLs. Source and classification review are recorded separately on each reference.
Find a design move. Shortlist the references. Export a brief with the notes and sources ready for your next project — no account needed.
What are you building?
What are you building?
New in the vault: 12 practical patterns with source notes and original diagrams.
Bento Grid / Apple Modular Layout · landing page · via Godly
Source: pending · Classification: pending
Steal · typographyNotes by Will
Each bento cell contains exactly two typographic tiers: a 14px muted category label at top-left and a 72px–96px display metric ('10-core CPU', '38 TOPS') anchored at bottom-left — zero paragraph prose.
Steal · grid/layoutNotes by Will
20px uniform gap between dark anodized cards (#141416) over pure black (#000000), collapsing cleanly from a 4×3 desktop mosaic to a 2×6 tablet grid without changing aspect ratios.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-23. Capture does not establish source verification.
Bento Grid / Apple Modular Layout · landing page · via Godly
Source: pending · Classification: pending
Steal · component patternNotes by Will
Every bento cell is a live sandboxed widget (keyboard shortcut tester, chart scrubber, poll block) rather than a static PNG, letting visitors test five product primitives inside one viewport.
Steal · grid/layoutNotes by Will
Card padding is locked to 28px on all sides with titles pinned to the bottom 25% of each cell so the upper 75% functions as an unobstructed stage for the interactive graphic.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-23. Capture does not establish source verification.
Bento Grid / Apple Modular Layout · landing page · via Landbook
Source: pending · Classification: pending
Steal · colorNotes by Will
Light-mode bento discipline: #ffffff cards sit inside a #f9fafb recessed outer frame with 1px #e5e7eb borders, proving bento grids need crisp luminance stepping rather than dark-mode neon glows.
Steal · component patternNotes by Will
The short-link card includes a live 'Click to copy' demo URL whose click counter increments in the adjacent analytics bento cell, linking two grid cells into a single cause-and-effect loop.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-23. Capture does not establish source verification.
Kinetic Typography / Viewport Stretcher · video / motion · via Awwwards
Source: pending · Classification: pending
Steal · typographyNotes by Will
Variable font axes (wdth 50..150, wght 200..900) are driven directly by scroll velocity and pointer X/Y coordinates so the headline stretches edge-to-edge (100vw) as a kinetic accordion.
Steal · motion/interactionNotes by Will
Phase-offset sine wave staggering (delay: calc(var(--line-index) * 45ms)) turns static multi-line stacked display type into a rhythmic mechanical cylinder.
Original: DIA Studio. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-22. Capture does not establish source verification.
Kinetic Typography / Viewport Stretcher · full website · via Godly
Source: pending · Classification: pending
Steal · typographyNotes by Will
Display masthead uses font-size: clamp(4.5rem, 16.5vw, 22rem) with line-height: 0.84 and -0.04em tracking so the wordmark physically locks to both left and right viewport edges.
Steal · grid/layoutNotes by Will
Tiny 12px uppercase monospace index coordinates ([01 // ARCHITECTURE]) sit pinned at the exact mathematical intersections of the 12-column grid beneath the giant display type.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-22. Capture does not establish source verification.
Kinetic Typography / Viewport Stretcher · full website · via Awwwards
Source: pending · Classification: pending
Steal · motion/interactionNotes by Will
Project list rows apply a transient transform: skewX(calc(var(--scroll-velocity) * -0.18deg)) that snaps back to 0deg with a 280ms cubic-bezier ease the instant scrolling stops.
Steal · component patternNotes by Will
Hovering a full-width project row expands an inline video reel inside the word gap between the client name and the year (LOCOMOTIVE [REEL] 2026), pushing the text apart horizontally.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-22. Capture does not establish source verification.
Kinetic Typography / Viewport Stretcher · video / motion · via Godly
Source: pending · Classification: pending
Steal · motion/interactionNotes by Will
Container morphs from a compact 126×36px pill to a 360×180px notification card using critically damped spring physics (stiffness: 320, damping: 26) with velocity handoff mid-gesture.
Steal · component patternNotes by Will
Live waveform bars and countdown timers stay continuously mounted during container expansion, scaling their layout bounds without unmounting or resetting animation frames.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-22. Capture does not establish source verification.
Every executed shell command and its stdout stream is encapsulated into a discrete DOM block with its own sticky header (working directory, exit code badge, elapsed time, and one-click permalink).
Steal · typographyNotes by Will
Strict character-cell alignment: all borders, padding, and status columns use integer ch and lh units so ASCII tables and box-drawing characters (┌─┐) never suffer subpixel drift.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-21. Capture does not establish source verification.
Terminal / CLI Portfolio Emulation · full website · via Httpster
Source: pending · Classification: pending
Steal · colorNotes by Will
High-saturation 256-color ANSI palette (hot magenta #ff5faf and mint #00ffaf) paired against deep aubergine #15131d, proving terminal interfaces can feel playful rather than drab green-on-black.
Steal · component patternNotes by Will
Code snippets render inside real Unicode box-drawing frames (╭───╮) with inline keyboard hint footers (↑/k up • ↓/j down • q quit) that mirror the actual TUI library output.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-21. Capture does not establish source verification.
Hero banner renders an interactive character-grid canvas where cursor movement perturbs ASCII glyphs into a glowing wave before settling back into the Ghostty silhouette.
Steal · grid/layoutNotes by Will
Documentation and feature callouts use a single 80ch monospace column with -- comment dividers and zero decorative icons, honoring classic man-page legibility.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-21. Capture does not establish source verification.
Terminal / CLI Portfolio Emulation · full website · via Hoverstates
Source: pending · Classification: pending
Steal · texture/materialNotes by Will
The entire viewport is a single <pre> character buffer updated at 60fps; density ramps ( .:-=+*#%@) create smooth 3D lighting and volumetric shadows using zero raster pixels.
Steal · component patternNotes by Will
Navigation links sit inline inside the character grid as bracketed tokens ([PROJECTS], [NOTES], [INDEX]) that invert foreground and background cell colors on hover.
Original: Andreas Gysin. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-21. Capture does not establish source verification.
Mobile Native / Haptic Minimal · mobile app · via Refero
Source: pending · Classification: pending
Steal · component patternNotes by Will
Tapping any wallet card triggers a spring-driven accordion expansion while sibling cards tuck cleanly into a 44px bottom bezel tray, keeping every primary action inside the one-handed thumb arc.
Steal · motion/interactionNotes by Will
Numeric keypad entries scale individual digit glyphs from 48px down to 28px dynamically as the amount grows, paired with crisp stepped scale bounces on each digit tap.
Original: Benji Taylor / Family. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-20. Capture does not establish source verification.
Mobile Native / Haptic Minimal · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · motion/interactionNotes by Will
The bottom-right '+' button is draggable: pulling it upward parts existing list rows with a 44px blue insertion gap so you create a task or heading at the exact desired position in one gesture.
Steal · typographyNotes by Will
Zero card borders or row dividers: visual grouping relies entirely on 26px bold project headers, 15px body rows, and 24px vertical section breathing room.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-20. Capture does not establish source verification.
Mobile Native / Haptic Minimal · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · component patternNotes by Will
App launch auto-focuses the bottom search input with the software keyboard already raised, eliminating the redundant initial tap required by top-bar mobile browsers.
Steal · motion/interactionNotes by Will
Pulling past the bottom scroll boundary reveals a circular radial action scrubber where horizontal thumb drift selects between New Tab, Summarize, and Reader Mode.
Fonts: Inter, Georgia · Original: The Browser Company
Original: The Browser Company. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-20. Capture does not establish source verification.
Mobile Native / Haptic Minimal · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · motion/interactionNotes by Will
Two-stage horizontal swipe threshold: dragging 0–64px reveals the 'Accept' icon in muted gray; crossing 64px snaps the background to #5e6ad2 and scales the icon 1.15× to confirm release commit.
Steal · grid/layoutNotes by Will
Each mobile issue row compresses metadata into a 12px monospace prefix ('ENG-402') plus a two-line clamped title, preserving a full 56px touch target height without visual bloat.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-20. Capture does not establish source verification.
Hyper-Dense Data / Telemetry · product UI flow · via Refero
Source: pending · Classification: pending
Steal · typographyNotes by Will
Every numeric column enforces font-variant-numeric: tabular-nums at 12px/16px line-height with right-aligned decimal points so 40 rows × 12 columns of live tick data scan vertically without eye zig-zag.
Steal · colorNotes by Will
Cell background heatmaps use 8–22% opacity emerald (#10b981) and crimson (#ef4444) washes behind crisp #e2e8f0 text, encoding magnitude by background luminance while preserving AA text legibility.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-19. Capture does not establish source verification.
Hyper-Dense Data / Telemetry · product UI flow · via Refero
Source: pending · Classification: pending
Steal · component patternNotes by Will
Synchronized dual-cursor timeline: hovering any microsecond in the top minimap projects a hairline crosshair down through 100+ nested RPC span bars and pins latency deltas inline.
Steal · grid/layoutNotes by Will
Zero-gap 22px row height in the span table packs service name, operation, duration bar, and percentage of trace time into a single horizontal band.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-19. Capture does not establish source verification.
Strict semantic color budget: 92% of the UI is slate monochrome (#0f172a / #f8fafc), reserving amber (#f59e0b) exclusively for ATC delay vectors and sky blue (#38bdf8) for active flight path.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-19. Capture does not establish source verification.
Hyper-Dense Data / Telemetry · product UI flow · via Dark Mode Design
Source: pending · Classification: pending
Steal · component patternNotes by Will
Color-coded ticker linking: assigning a 6px colored dot (e.g. orange Group A) to the top-left corner of four separate chart/table widgets synchronizes their active symbol across the workspace.
Steal · grid/layoutNotes by Will
Tiling window manager snaps panels to a 4px grid with zero drop shadows and 24px compact titlebars containing inline timeframe pills (1D 1W 1M 1Y ALL).
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-19. Capture does not establish source verification.
Neo-Acid / Cyber-Organic · full website · via Godly
Source: pending · Classification: pending
Steal · typographyNotes by Will
5×7 dot-matrix display numerals contrast sharply against clean Swiss grotesque body copy, turning hardware telemetry (battery, glyph notifications, decibels) into a futuristic graphic signature.
Steal · texture/materialNotes by Will
Exposed PCB ribbon cables and transparent polycarbonate housing photography are overlaid with crisp 1px white technical callout lines and red status dots (#d71921).
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-18. Capture does not establish source verification.
Neo-Acid / Cyber-Organic · landing page · via Godly
Source: pending · Classification: pending
Steal · colorNotes by Will
Void-black chassis (#08080a) punctuated by high-voltage acid lime (#ccff00) and magenta (#ff0055) active step indicators that only illuminate when an audio loop is triggered.
Steal · component patternNotes by Will
Interactive 16-step pad grid in the hero lets visitors toggle synth hits directly in the browser before reading a single paragraph of marketing copy.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-18. Capture does not establish source verification.
Neo-Acid / Cyber-Organic · full website · via Awwwards
Source: pending · Classification: pending
Steal · texture/materialNotes by Will
3D iridescent orb emblem sits over a strict 1px wireframe grid; the specular chrome shader provides 100% of the visual drama while surrounding UI chrome stays pure black and white.
Steal · typographyNotes by Will
Wide-stance display headers (Syne ExtraBold) pair with bracketed monospace timestamps ([00:14:22 UTC]) to balance Y2K exuberance with archival precision.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-18. Capture does not establish source verification.
Warm Retro-OS / Workstation · full website · via Godly
Source: pending · Classification: pending
Steal · texture/materialNotes by Will
1-bit dithered monochrome game previews sit inside a warm industrial yellow (#ffc800) and unbleached parchment (#f7f4eb) layout that honors 1989 Macintosh desk accessories.
Steal · motion/interactionNotes by Will
Scrolling turns the Playdate's physical mechanical crank in the sticky margin, advancing frame-by-frame sprite sheets in lockstep with page progress.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-17. Capture does not establish source verification.
Warm Retro-OS / Workstation · editorial · via SiteInspire
Source: pending · Classification: pending
Steal · component patternNotes by Will
Classic 6-line horizontal pinstripe titlebar with a 16×16px close box and 1px crisp black outer border gives floating dialogs unmistakable foreground focus without a blurred drop shadow.
Steal · colorNotes by Will
Warm putty gray (#ece9df) and stone (#d8d3c4) surface steps reduce eye glare during long reading sessions compared to stark #ffffff backgrounds.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-17. Capture does not establish source verification.
Publicly sourced references link to an original; private or concept examples are labelled separately. All referenced work belongs to its creators. What this vault adds — and what it is for — is the commentary: the steal-notes are the content, not the pixels. Notes are written by hand unless their card says otherwise; a model draft is always labelled. Study use only.
Made something shown here and want it removed? Email hello@trova.design with the entry title or a link to this page — it comes down promptly, no questions asked.
Try it in your agent · no key
One command puts these notes inside Claude Code. Without a key the agent sees 5 families and gets 5 calls a day — enough to judge the taste before you rent it. The key opens every family and lifts the meter.
claude mcp add --transport http trova https://trova.design/api/mcp
