Lunes, 3 de marzo
Cosas para hoy
- Llamar a la imprenta
- Comprar café y sobres
- Regar las plantas
Pencil list on a notebook page
On a ruled notebook page, a pencil writes each line from left to right and then crosses out what is already done.
Settings
Code
<div class="uvq14-nb"><div class="pg"><p class="dt">Monday, 3 March</p><h3><span class="w" style="--i:0"><span class="t">Things for today</span><i class="pn" aria-hidden="true"></i></span></h3><ul><li class="dn"><span class="w" style="--i:1"><span class="t">Call the printer</span><i class="pn" aria-hidden="true"></i></span></li><li class="dn"><span class="w" style="--i:2"><span class="t">Buy coffee and envelopes</span><i class="pn" aria-hidden="true"></i></span></li><li><span class="w" style="--i:3"><span class="t">Water the plants</span><i class="pn" aria-hidden="true"></i></span></li></ul></div><button type="button" class="rw">Write it again</button></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.
More in Text & scroll
See all Text & scrollWhere to use it
A ruled page with a red margin and punched holes sets the scene, and a CSS clip path uncovers each line while a small pencil travels along it, so the list looks written live. Finished tasks then get a marker strike. It suits to-do apps, planners, onboarding checklists, schools and any product that talks about getting things done.
Change the heading in the text field and the tasks in the list; add the done class to the ones that should be crossed out. The main color is the ink and the secondary one the strike. The text is real, so screen readers read it straight away.