smooothy-federic-ooo
A surreal, playground-like developer showcase pairing stark monochrome minimalism with tactile 3D elements. Utilitarian micro-typography floats quietly around massive inflatable bubble letters and interactive food models against an endless pitch-black void.
Visit siteRated
5.8/ 10
From 12 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.
- AI scorejudged
- 7.7
- Systemmeasured
- 5.8
- Distinctionmeasured
- 0.7
- on the grid
- 14%
- vertical rhythm
- 66%
- type on a scale
- 50%
- contrast passing AA
- 100%
- unlike the library
- 0.16
- model craft
- 7.1/10
- model deviation
- 7.9/10
Colour
Background#000000
Text#ffffff
Accent#ffffff
Surface#000000
Muted#ffffff
Typefaces
- Display
- Geist
- Body
- Geist
- Mono
- Geist Mono
- Source
- self_hosted
- Scale
- 10 · 11 · 12 · 14
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 0px
Capture
- Category
- tools
- Sections
- 12
- Captured
- 2026-08-31
- Rhythm
- dark x12
Type rules
- body and display text kept small at 14px to maximize negative space for 3D canvases
- labels and navigation items set in uppercase with monospace accents
Colour rules
- interface elements restricted strictly to monochrome white on pure black
- chromatic color is reserved entirely for WebGL 3D meshes and gradient backgrounds
Voice rules
- ultra-short developer-focused microcopy
- keep technical specifications sparse and unpunctuated
Holds it together
- maintain a pure black background throughout the entire experience to let WebGL elements pop
- use tiny, high-contrast monospace and sans labels for UI chrome and metadata, letting 3D models dominate the scale
- confine layout text to the edges and corners, reserving central screen space for interactive 3D canvases
Contrast
text on background21.0:1 AAA
muted text on background21.0:1 AAA
text on surface21.0:1 AAA
accent on background21.0:1 AAA
background on accent21.0:1 AAA
Type, measured
- Body
- 14px / 1.5
- Measure
- —
- Display
- 14px / 1.5
- Tracking
- 0em display
- Scale ratio
- —
Voice
- Tone
- playful, irreverent, minimal
- Sentences
- short
- Person
- second
- Vocabulary
- informal
- Calls to action
- get, set, use
Built with
- Builder
- —
- Framework
- —
- Motion
- —
- WebGL
- yes
- Nav
- sticky_top_bar, 5 items, sticky
- Length
- 11.3 screens
Sections in page order
3 marked strong · 12- 00
hero
StrongSurreal and playful interactive 3D carousel showcasing whimsical floating food items against a sleek dark backdrop.
- Mood
- playful + whimsical
- Layout
- 1 col · full bleed · balanced
- 01
hero
A stark black expanse broken only by a cropped, bubbly cartoon character peeking up from the bottom edge.
- Mood
- playful + mysterious
- Layout
- 1 col · asymmetric · airy
- 02
other
A stark black expanse framed by the reaching fingers of a vintage cartoon white glove.
- Mood
- playful + mysterious
- Layout
- 24 col · asymmetric · airy
- 03
other
StrongA vast black expanse broken only by a playful monochrome cartoon illustration peeking into the bottom frame.
- Mood
- playful + mysterious
- Layout
- 1 col · full bleed · airy
- 04
showcase
A stark black void punctuated by a cropped, high-contrast cartoon hand reaching in from above.
- Mood
- whimsical + mysterious
- Layout
- 1 col · asymmetric · airy
- 05
showcase
Bold, stark monochrome canvas filled with oversized, inflatable bubble letters constrained inside geometric wireframes.
- Mood
- playful + rebellious
- Layout
- 1 col · stacked · airy
- 06
showcase
A stark black void framed by bold, rounded white cartoon illustrations drifting in from the perimeter.
- Mood
- playful + mysterious
- Layout
- 1 col · full bleed · airy
- 07
statement
Chunky cartoon bubble lettering pops in stark monochrome contrast across a deep black void.
- Mood
- playful + rebellious
- Layout
- 1 col · full bleed · dense
- 08
other
A stark black expanse broken only by the rounded edge of a whimsical white cartoon illustration peeking in from above.
- Mood
- whimsical + mysterious
- Layout
- 1 col · full bleed · airy
- 09
other
A vast field of black with only the top of a retro cartoon character peering up from the bottom edge.
- Mood
- whimsical + mysterious
- Layout
- 1 col · centered · airy
- 10
statement
Bold, playful monochrome graffiti bubble lettering floats against stark black negative space.
- Mood
- playful + rebellious
- Layout
- 1 col · centered · airy
- 11
footer
StrongStark monochrome footer dominated by massive bubble-style graffiti typography colliding with minimal utilitarian credits.
- Mood
- playful + rebellious
- Layout
- 1 col · asymmetric · airy
