---
id: "2115836067123282016"
source: https://x.com/bestdesignsonx/status/2115836067123282016
author: "Best Designs On X (@bestdesignsonx)"
media: "video, 1920x1080, 24.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Inflated Letters Playful Portfolio

## Summary
A scroll recording of a designer-engineer portfolio whose hero is a giant name in puffy, inflated cream 3D letters surrounded by doodles and toy-like 3D props (a wet-floor sign, a cartoon bomb, a traffic cone, a spiky burst). The rest of the page keeps the same toy-box humour with chunky rounded headings, a contribution heatmap, tool tiles and a tilted sticker sign-off, all on warm paper beige.

## Style
- Theme: light (warm paper beige)
- Mood: playful, cheeky, tactile, friendly, crafted
- Tags: portfolio, inflated-type, 3d-props, doodles, heatmap, sticker, floating-nav, custom-cursor
- Category: Landing page, 3D

## Palette
| Role | Hex |
|---|---|
| Background | #EFEBE4 |
| Card shade | #DFDAD1 |
| Card light | #FAF8F4 |
| Taupe | #C3BBAC |
| Ink | #2B221C |
| Link blue | #6F7AAC |
| Heatmap lavender | #C1C8EC |
| Sticker blue | #4B5CF2 |

## Typography
- Hero name: inflated 3D balloon letters in cream, about 45% of frame height, all caps; built as a 3D render rather than a font. Closest flat stand-in: Rubik Mono One or Titan One with heavy shading.
- Intro line and section headings ("Things I've designed & built.", "worth remembering."): chunky rounded quirky display, extra bold, sentence case, tight tracking, headings about 9% of frame height. Shantell Sans (800) or Grandstander (800).
- Small labels ("SELECTED WORK", tool names, "RESUME"): monospace or rounded caps at 9 to 11px with wide tracking (0.12em). Space Mono (400).
- Body and nav: small sans regular 12 to 13px. Inter (400).

## Layout
- 16:9 canvas (1920x1080), page centred at about 1100px wide.
- Floating nav: centred pill about 360x36px with 4 links, white with a 1px border and soft shadow; a separate dark "Let's talk" pill pinned top right. Active link becomes a dark filled pill.
- Hero: the name centred, props scattered around it at the corners, intro line centred below, then a fan of 4 project screenshot cards arcing up from the bottom edge.
- Work section: left-aligned numbered badge, heading, two-line body, then a segmented toggle (Mobile App, Website) and a split row with a phone-mockup card at left and project text at right.
- Activity section: a rounded card with a 52-column heatmap (10px squares, 3px gaps), then a row of 11 icon tiles and a wrapping row of "+" pill chips.
- Footer: huge heading, black email pill, 4 glossy 3D icon tiles and a sticker button rotated about -8deg.

## Elements
- Puffy 3D letters with soft ambient occlusion and a pale blue squiggle underline beneath each.
- Doodles: blue crown outline, four-point sparkle, motion arcs, small dots.
- 3D props: yellow wet-floor sign, black bomb with lit fuse, orange-and-white traffic cone, black spiky explosion burst.
- Custom cursor: a 16px hollow black ring.
- Project cards with screenshots and a fuzzy blue mascot figure.
- Tool tiles: small app logo placeholders with mono captions.
- Sticker button: blue pill with white uppercase text and a smiley glyph, drop shadow 0 6px 0 rgba(0,0,0,0.15).

## Motion
- 0 to 5s: the letters inflate from flat with a bouncy spring (about 700ms), doodles draw on with stroke animation, props drop in with a 120ms stagger.
- 5 to 10s: scroll parallax; the letters move slower than the props, the bomb fuse sparks and the burst rotates in.
- 10 to 14s: project cards fan up from below, each rotating from 0 to about plus or minus 8deg.
- 14 to 20s: section headings slide up 20px and fade in over 400ms; heatmap squares fill with a fast diagonal stagger (5ms each).
- 20 to 25s: footer icons pop in with scale 0.8 to 1; the sticker wobbles in with a rotate spring.

## Rebuild it
1. Page shell: `bg-[#EFEBE4] text-[#2B221C]`, fixed centred nav `rounded-full bg-white/80 backdrop-blur border border-black/5 shadow-sm px-2 py-1`.
2. Hero letters: export pre-rendered transparent PNG or WebP letters (or a small Three.js scene with rounded extrusions) and animate each with Motion `scale` 0.6 to 1 and `rotate`, spring stiffness 300 damping 14, stagger 80ms.
3. Props: absolutely positioned images with `useScroll` and `useTransform` for differing parallax speeds.
4. Headings: Shantell Sans 800 at `text-6xl leading-none tracking-tight`, revealed with `whileInView` y 20 to 0.
5. Heatmap: CSS grid `grid-rows-7 grid-flow-col gap-[3px]` of 10px rounded-sm cells coloured by a 5-step lavender scale; animate opacity with index-based delay.
6. Sticker: `rotate-[-8deg] rounded-full bg-[#4B5CF2] text-white uppercase tracking-wider` with a hover spring to 0deg.

## Generation prompt
A playful personal portfolio website on warm beige paper: a giant name in glossy puffy inflated cream balloon letters with blue doodles, surrounded by toy-like 3D props (a yellow wet-floor sign, a cartoon bomb, a traffic cone, a black spiky burst); a floating pill navigation, chunky rounded headings and a tilted blue sticker button; soft studio lighting, cheeky, no logos.