Design System & Animated Primitives
A modular, cohesive library of tactile, spring-animated UI components built on React 19, Motion, and Watermelon UI, strictly adhering to the Monochrome Executive & Literary design standards.
Badges & Status Chips
Liquid Animated Tabs
Watermelon Continuous TabsCurrent active selection: all
Split Card Accordion
Watermelon Card Split AccordionThe drizzle clung to the asphalt outside Station Seven like silver dust. Julian tightened his trench coat and double-checked the coordinates encoded into his mechanical pocket watch. The contact had promised a key, but in this district, keys were rarely meant for doors.
Within the archive vault, thirty-six copper reels rotated in silent synchrony. Every syllable uttered across the metropolitan exchange was inscribed into micro-film. He touched the third cylinder and felt the heat of recent transcription.
When power severed across the fifth ring, the sound was not explosive, but a sudden, terrifying absence of hum. The digital library went dark, leaving only paper, ink, and the memory of what had been promised.
Tactile Sliders
Watermelon Adaptive SliderCommand Search Palette
Watermelon Command SearchQuick Command Palette (`Cmd + K`)
Instant keyboard navigation across manuscripts, authors, tags, and settings.
Animated Overlays & Drawers
Expandable Author Dossier
Watermelon Expandable Card
✓Elena Vance
@elenavance
Speculative noir fiction novelist and essayist exploring post-industrial archives and high-finance intrigue.
4
Works
14,200
Readers
184k
Reads
Expanding Filter Disclosure
Watermelon Filter DisclosureMorphing Filter Pill & Selection Menu
A tactile filter button that morphs into a vertically stacked selection drawer with staggered entry and active checkmark springs.
Current filter: fiction
Animated Search Components
Tactile, spring-physics search components designed for toolbars, hero headers, and reading archives.
Starts as a compact trigger pill and smoothly springs open horizontally on click or shortcut key press.
Persistent pill with micro-scale on focus, clear button, and live count indicator.
Floating island with shadow elevation, optional category scope tag, and active ring spring.
Understated literary underline with an animated horizontal border that expands outward on focus.
Segmented capsule combining an animated search input with an integrated scope dropdown filter.
Scope: all
Types and deletes curated literary titles with a blinking monospace caret. Halts automatically on focus.
Focusing the search bar reveals an animated quick query curtain with spring-tapped editorial suggestions.
OmniSearch Component
Rest state renders as an unobtrusive simple icon button. On click or keyboard trigger (/), it expands seamlessly with spring physics into either a fixed-width capsule or a responsive full-width container, featuring an optional compound scope dropdown partition and continuous typewriter ghost query cycle.
Expands from an icon button to a fixed-width capsule (w-72 sm:w-84) featuring a split-pill compound scope dropdown and typewriter ghost cycle.
Expands from a single icon button to occupy the entire available width of its parent container, with search icon on the left and typewriter ghost placeholder cycle.
Watermelon UI Card Suite
High-fidelity interactive card components built with React 19, Motion spring dynamics, and architectural monochrome styling.
1. 3D Gestural Card Swipe Carousel
CardSwipeDrag left or right to swipe through cards with dynamic 3D rotateY transforms and spring momentum.
Weekly Manuscripts
Serialized Novels
Immerse in deep multi-chapter narratives penned chapter-by-chapter by verified authors.
Critical Discourse
Literary Essays
Long-form investigations, cultural meditations, and philosophical inquiries.
Cold War & Meridian
Atmospheric Noir
Espionage, coastal silence, and psychological depth set across European borders.
New Voices
Rising Authors
Writers in residence publishing debut monographs and independent serialized stories.
Reader Repositories
Trending Readings
The literary works commanding continuous attention across the reader community.
2. Stacked Revealing Cards
RevealingCardsFlick or drag the top card beyond the threshold to send it to the back of the deck with depth scaling.
The Silent Meridian
By Elena Rostova
94% Match
Reader Compatibility
An Inventory of Baltic Fog
By Elena Rostova
12 Chapters
Full Release
Station Nine: Cold War Monograph
By Julian Thorne
48k Words
Draft Volume
A Winter in Kyoto
By Marcus Vance
Completed
Monograph Status
3. Tactile Tilt & Blur Cards
WigglingCardsDynamic distance-based rotation tilt and depth-of-field blur as the user navigates metrics.
Total Chapter Reads
184.2k
Reader Bookmarks
14,892
Active Writers in Folio
1,420
Completed Manuscripts
384
4. Expandable Activity Ledger Card
Tactile ledger card with 3 display modes: floating Popover (zero lower content shift), Drawer (side sheet), or Inline (accordion).
5. Author Profile with Sparkline
TactileProfileCardAuthor overview card with inline SVG activity sparkline, verified badge, and expandable metrics drawer.
✓Dr. Julian Thorne
@julianthorne
6. FLIP Shared-Layout Modal Card
Click to open shared-layout modal with zero page pop or unmount lag.
Editorial EventLive Reading & Pacing Analysis
Midnight Salon: The Baltic Meridian
Join verified author Elena Rostova and fellow readers for an intimate live analysis of serialized chapter pacing, tension, and narrative reveals.
7. Segmented Arc Metric Card
Reading quota visualizer with 40-segment capacity gauge and export button.
Monthly Reading Quota
Tracked across serialized manuscripts
The Silent Meridian
Today, 14:20 • 3 chapters
An Inventory of Baltic Fog
Yesterday • 2 chapters
Station Nine
Oct 02 • 5 chapters
8. Literary Salon Session Card
Roundtable session card with stacked participant avatars and expandable agenda.
Literary Salon & Roundtable
Baltic Noir & The Art of Fiction
9. Synchronized Publishing Pipeline Card
DeploymentCardFolio distribution status with live pipeline stages, environment indicators, and animated terminal logs.
The Silent Meridian — Vol. 2
Hatchpen Brand Mark & Insignia
Official Brand Asset • Vector SilhouetteThe official Hatchpen brand identity: architectural 3D open-book silhouette with detailed quill feather pen and ink flourish, paired with high-contrast HATCH pen typography and the literary manifesto “Writings. Beyond the Hype.”
Book & Quill Emblem
<HatchpenEmblem />
Architectural Book + Quill Feather
Primary app icon and favicon mark. 3D folded pages silhouette with detailed feather quill and flowing ink flourish.
Official Full Brand Lockup
<HatchpenLogo variant="full" />
Compact Navbar Lockup
<HatchpenLogo variant="compact" />
Inverted (Dark Mode) Lockup
<HatchpenLogo variant="inverted" />
Wordmark Scale Hierarchy
xs • sm • md • lg • xlMonochrome Brand Identity Board
src/assets/logo
Unisex Avatar & Icon Suite
Core Asset • Editorial MinimalClean, gender-neutral vector avatar silhouette tailored for the Hatchpen monochrome design system. Automatically provides fallback rendering when profile pictures are absent or loading.
Size Hierarchy (Circular & Rounded)
xs • sm • md • lg • xl • 2xl • 3xlStandalone Unisex Avatar Vector Icon
<UnisexAvatarIcon />Asset Path: /unisex-avatar.svg
Scalable, zero-dependency SVG with adaptive var(--bg-subtle) fill and var(--ink-muted) geometry.