Home

Playground

Interactive demos of the components this site is built from. Poke at them.

Demo 01

Kinetic text

Hover the letters. Each one is its own span; CSS :has() and sibling selectors thicken the hovered letter and its neighbours, with no JavaScript. Screen readers get the whole word from a visually hidden copy.

src/components/ui/kinetic-text.tsx

Lando Rafael

Demo 02

Flip card

Hover the card, or tab to it with the keyboard: it flips on focus so the link on the back is visible when you reach it. Used for projects on the home page.

src/components/ui/CardFlip.tsx

F

Flip card

Hover or focus to flip

Flip card

The back face holds the details and a link. The front is hidden from assistive tech while flipped.

CSS 3D transforms
Flips on hover and on focus
Staggered feature list
Browse the work

Demo 03

Tilt card

Move the pointer over the card. Motion springs map the pointer position to a small rotation on both axes, and it settles back when you leave.

src/components/ui/tilt-effect.tsx

Security-first

Spring-damped rotation, capped at a few degrees.

Move your pointer here

Demo 04

Live theme tokens

The same markup, painted only with CSS variables. Switch the theme and every colour below changes, because nothing is hard-coded.

src/app/globals.css

Current theme: …

Incident report

SOCL1

Three alerts triaged, one escalated. All systems nominal.

Values in the current theme

  • --color-primary…
  • --color-primary-hover…
  • --bg-base…
  • --bg-surface…
  • --bg-elevated…
  • --text-primary…
  • --text-secondary…
  • --text-tertiary…
  • --text-disabled…