Magnetic Fridge Poetry

Fridge magnet word tiles you drag freely to compose sentences, with slight rotation and a snap-on feel.

White magnet word tiles with a slight random rotation and a papery shadow, scattered across a brushed fridge door, free to be dragged around and arranged into sentences. Picking a tile up scales it, deepens its shadow, and floats it to the top; releasing it makes it wobble gently on a low-damping spring, imitating the "clack" of a magnet snapping back onto the door.

Loading preview…

npx shadcn@latest add https://webberui.com/r/magnetic-fridge-poetry.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Board heightheight

300

Scatter seedseed

Max tilt anglemaxTilt

<MagneticFridgePoetry />

Installation

npx shadcn@latest add https://webberui.com/r/magnetic-fridge-poetry.json

Or, once registries are configured in components.json, install it as @webberui/magnetic-fridge-poetry.

Usage

import { MagneticFridgePoetry } from "@/components/ui/magnetic-fridge-poetry";

<MagneticFridgePoetry
  words={["Moonlight", "on", "the roof", "softly", "melts"]}
  onArrange={(items) => console.log(items)}
/>

Props

Prop	Type	Default	Description
`words`	`string[]`	—	The list of words on the magnet tiles
`onArrange`	`(items: FridgeArrangement[]) => void`	—	Callback fired after any tile is dropped or moved by keyboard; each entry holds `word`, `index`, and the tile centre's `x`/`y` relative to the board (0–1)
`height`	`number`	`380`	Board height (px)
`seed`	`number`	`7`	Random seed for the initial scatter; change it for a different arrangement
`maxTilt`	`number`	`7`	Maximum random rotation of a tile (degrees)
`className`	`string`	—	Forwarded to the board container

Accessibility

Every tile is keyboard-focusable (Tab); arrow keys nudge its position and Shift + arrow keys move in larger steps, with the displacement automatically clamped inside the board
The board is role="list" and the tiles are role="listitem", with aria-label conveying the "magnet word tile" semantics and the operating hints
When the user has "reduce motion" enabled at the system level, dragging simply tracks the pointer in real time with no wobble or spring-back animation
Tiles carry touch-none, so touch dragging cannot accidentally scroll the page
The initial scatter uses seeded pseudo-random numbers, so SSR and client rendering match and there is no hydration flash