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
Lector de tinta electrónica
Una página de novela en pantalla e-ink: al pasar página hace el parpadeo en negativo típico y avanza el progreso.
Ajustes
16px
1x
Código
<article class="uvq07-ink"><div class="sc" tabindex="0" aria-label="Página del libro, usa las flechas para pasar"><header><span>La sombra del faro</span><span>Capítulo 3</span></header><p class="tx" aria-live="polite">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.</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="Página anterior"></button><button type="button" class="zr" aria-label="Página siguiente"></button></div><i class="hw" aria-hidden="true"></i></article>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Ver todos: CardsDónde usarlo
Los lectores electrónicos tienen una manía reconocible: la pantalla parpadea en negativo un instante al cambiar de página. Esta tarjeta la copia con un filtro de inversión por pasos sobre una pantalla gris papel, texto serif justificado y una fina línea de progreso. Toca el lado izquierdo o derecho, o usa las flechas. Encaja en apps de libros, editoriales, registros de lectura y avances de newsletter.
El color principal es la tinta y el secundario el tono de la pantalla. Pon tus párrafos en la lista de páginas, ajusta los números y deja cada página lo bastante corta para que quepa.