el mar guarda tu nombre

Arrastra las palabras o muévelas con las flechas

HTML + CSSText & scroll

Fridge magnet poetry

An enamel fridge door with magnetic words you drag with a finger or move with the arrow keys to write lines of poetry.

Settings

16px
1x

Code

<div class="uvq14-mag"><div class="dr" role="group" aria-label="Word magnets" aria-describedby="uvq14-mag-h"><p class="sr">the sea keeps your name</p><p class="ex" hidden>slowly and today in blue salt</p><div class="ws" translate="no"></div><i class="hd" aria-hidden="true"></i></div><p class="hn" id="uvq14-mag-h">Drag the words or move them with the arrow keys</p></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Text & scroll

See all Text & scroll

Where to use it

Magnetic poetry kits turned kitchen doors into notebooks, and this block brings that game to the web. Each word is a small tilted tile on a glossy fridge door with a chrome handle; it lifts with a shadow while dragged and stays where it lands. It suits writing workshops, book festivals, brand campaigns that invite people to play and creative onboarding.

Write your phrase in the text field and the extra words in the hidden list; they become tiles automatically. The main color paints the door and the secondary one the accent tiles. Every tile is a button, so the arrow keys move it, and Shift moves it faster.