El faro llevaba once años apagado, pero aquella noche alguien había subido la escalera. Desde el puerto, Inés vio la luz girar dos veces y detenerse, como si dudara. Cogió el abrigo y las llaves de la barca y salió sin despertar a nadie.
HTML + CSSCards
E-ink reader page
A novel page on an e-ink screen: turning the page triggers the typical negative flash and moves the progress bar.
Settings
16px
1x
Code
<article class="uvq07-ink"><div class="sc" tabindex="0" aria-label="Book page, use the arrow keys to turn"><header><span>The Lighthouse Shadow</span><span>Chapter 3</span></header><p class="tx" aria-live="polite">The lighthouse had been dark for eleven years, but that night someone had climbed the stairs. From the harbour, Inés saw the light turn twice and stop, as if it were hesitating. She took her coat and the boat keys and left without waking anyone.</p><div class="br" aria-hidden="true"><i></i></div><footer><span><b class="pn">112</b> / 264</span><span><b class="pc">42</b> %</span></footer><button type="button" class="zl" aria-label="Previous page"></button><button type="button" class="zr" aria-label="Next page"></button></div><i class="hw" aria-hidden="true"></i></article>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 Cards
See all CardsWhere to use it
E-readers have a recognizable quirk: the screen flashes to negative for a moment when the page changes. This card copies it with a stepped invert filter on a paper-grey screen, serif justified text and a thin progress line. Tap the left or right side, or use the arrow keys. It fits book apps, publishers, reading trackers and newsletter previews.
The main color is the ink and the second the screen tone. Put your own paragraphs in the pages list and adjust the page numbers, and keep each page short enough to fit the screen.