Public vault · every note in the open

Steal this vault

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.

Refine: kind, font, color, order

e.g. #e4572e

Jump to results

Fluid black pill container expanding and contracting dynamically to hold context-sensitive alerts, media, and actions. Read it as a style sheet →

Active filters:family: Dynamic Island / Pill Morphing UI

4 references in Dynamic Island / Pill Morphing UIClear search & filters

Apple iOS Live Activities — Compact Capsule Dual-Sensor Readout

Dynamic Island / Pill Morphing UI · mobile app · via Mobbin

Source: pending · Classification: pending

Steal · grid/layoutNotes by Will
Split the 36pt hardware cutout capsule into two asymmetric wings: a 24pt leading icon badge anchored flush-left and a tabular-nums countdown (04:18) anchored flush-right with 12pt internal clearance around the camera sensor.
Steal · colorNotes by Will
Use pure #000000 OLED black as the capsule ground so the hardware cutout disappears completely, pairing a single semantic accent (#30d158 active green or #ff9f0a timer amber) for instant peripheral legibility.

Fonts: SF Pro Rounded, SF Mono · Original: Apple Human Interface Team

private-reference-only

View original ↗

Source & usage rights

Original: Apple Human Interface Team. 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-11. Capture does not establish source verification.

Apple iOS Dynamic Island — Fluid Spring Long-Press Expanded Card

Dynamic Island / Pill Morphing UI · mobile app · via Mobbin

Source: pending · Classification: pending

Steal · motion/interactionNotes by Will
Long-pressing the compact pill morphs the container from height: 36pt; border-radius: 18pt to height: 168pt; border-radius: 44pt using a critically damped spring (damping: 0.82, response: 0.38s) while keeping the leading icon pinned to its top-left origin.
Steal · component patternNotes by Will
Limit expanded island actions to at most two 44pt pill buttons in the bottom row so thumb taps never accidentally trigger the underlying status bar.

Fonts: SF Pro Display, SF Mono · Original: Apple Human Interface Team

private-reference-only

View original ↗

Source & usage rights

Original: Apple Human Interface Team. 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-11. Capture does not establish source verification.

Uber iOS Live Activity — Real-Time ETA Progress Bar & License Plate Pill

Dynamic Island / Pill Morphing UI · mobile app · via Mobbin

Source: pending · Classification: pending

Steal · component patternNotes by Will
Render the vehicle license plate inside a high-contrast #1f1f24 monospace badge (14pt bold) paired with a 6pt continuous progress track that advances a miniature vehicle glyph toward the pickup pin.
Steal · copywritingNotes by Will
Replace verbose status sentences with a single two-word verb phrase (Arriving now · 2 min) so the entire lock-screen banner reads in under 300ms.

Fonts: Uber Move, SF Mono · Original: Uber Design

private-reference-only

View original ↗

Source & usage rights

Original: Uber Design. 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-11. Capture does not establish source verification.

Flighty iOS Live Activity — Gate & Delay Telemetry in 36pt Cutout

Dynamic Island / Pill Morphing UI · mobile app · via Mobbin

Source: pending · Classification: pending

Steal · typographyNotes by Will
Airport IATA codes (SFO → LHR) and gate badges (B14) use split-flap inspired tabular-nums monospace with #eab308 amber highlights whenever a gate or boarding time mutates.
Steal · grid/layoutNotes by Will
Pack four flight telemetry variables (Origin, Destination, Gate, Seat) into a 160pt expanded island by using a 1px #27272a horizontal rule to separate route progress from boarding credentials.

Fonts: SF Pro Display, JetBrains Mono · Original: Flighty

private-reference-only

View original ↗

Source & usage rights

Original: Flighty. 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-11. Capture does not establish source verification.

Read the editorial record

Provenance & takedown

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