Skip to main content

Playground

Interactive demos of some components I thought were fun. Your mileage may vary.

Squishy thumbs
With CSS-anchored value
25
Color swatches

Selected: var(--color-blue-500)

Color code
Animated button

Hover

Consistent width

Delete button
Chrome Tabs
Content
Copy button
Mode toggle
Morph filter icon
Emoji feedback
Remix of Vercel's Emoji Feedback component
Mark

A gray highlight? Boring!

No worries, we can slap a data-hueattribute on it. Let's do some classic highligter colors, like yellow or pink or lime or magenta or cyan.

A semi-realistic highlighter effect with corner-shape.
Mark II

The highlight shape also plays nice with long strings. It's got box-decoration-clone applied to make the shape span line breaks. Notice how it also applied to the codeelement too? I think that's a nice touch. Same with changing its background color, which you probably didn't notice.

Mark III
Custom overrides

Don't like the default values? Override with classes, like this classic highlighter look.

Site Search
Device frame — phone

A remix of Geist's Phonecomponent. Responds to color mode and uses your device's clock and battery level (non-iOS).

Device frame — browser
https:// bob.fyi
Browser frame preview
Keys
⌘/⌘IK