Una cajita de herramientas para que tu web sea divertida de scrollear. Agrega dos líneas y después reparte atributos data-fs-* donde quieras.
<!-- dentro de tu <head> --> <link rel="stylesheet" href="https://funscroll.life/kit/funscroll.css"> <!-- antes de </body> --> <script src="https://funscroll.life/kit/funscroll.js"></script>
Durante años, tener una web propia significaba saber programar o pagarle a alguien que supiera. Por eso casi todos nos mudamos a las mismas tres o cuatro apps, y nuestro trabajo terminó viviendo en el feed de otro.
Eso cambió. Con el vibe coding describes con tus palabras lo que imaginas, una IA escribe el código, y tú lo vas moldeando hasta que se siente bien. Hoy cualquiera puede hacer su web: artistas, músicos, cocineras, adolescentes, abuelas.
Y eso hace posible salir de las redes. Tu propio rincón de internet, hecho a tu manera, donde ningún algoritmo decide quién lo ve. Hacer tu propia web es la forma más práctica de salir del doomscroll.
Antes de pensar en "header, menú, footer", pregúntate qué quieres que sienta la gente. ¿Calma? ¿Perderse? ¿Abrir un cajón lleno de cosas? Dile eso a la IA primero.
Pide "un solo archivo index.html con el CSS y el JavaScript adentro". Lo abres con doble click, sin instalar nada. Desde ahí creces.
Pega en tu chat las dos líneas del funscroll kit y la lista de atributos data-fs-*. Después pídele que los use. Te ahorras mucho ensayo y error.
Pasos chiquitos: "haz el título más grande", "ahora que las fotos floten". Si pides diez cosas juntas, algo se rompe y no sabrás qué.
Casi todo el mundo va a entrar desde el teléfono. Revísala ahí seguido y pide arreglos concretos: "en mi teléfono el texto se sale de la pantalla".
Cuando algo funcione, guarda una copia (index-v3.html) o usa GitHub. Así experimentas sin miedo a perder lo que tenías.
GitHub Pages, Netlify o Neocities alojan webs sencillas gratis. Un dominio propio cuesta pocos dólares al año y la hace tuya de verdad.
"Explícame lo que acabas de cambiar como si fuera nueva en esto." Aprendes sin darte cuenta y vas a poder arreglar cositas tú misma.
Tus fotos, dibujos, escaneos, tu letra, notas de voz. La IA hace la estructura; lo que la hace tuya es el material que solo tú tienes.
La IA tiende a repetir los mismos looks: degradados morados, tarjetas redondeadas, todo centrado. Pide algo específico: "como un fanzine de los 90", "como la etiqueta de un museo", "como la cocina de mi abuela".
Dos tipografías y tres o cuatro colores bastan. Elígelos tú (Google Fonts tiene cientos) y dile a la IA exactamente cuáles.
Pide que las cosas se encimen, se inclinen, estén fuera de lugar. El orden viene por defecto; el desorden hay que pedirlo.
Una pantalla final, una despedida, un "ya puedes cerrar esta pestaña". Es lo más anti-doomscroll que puedes hacer.
Una palabra que cambia al pasarle el mouse, un doble click que hace algo inesperado. Pequeños premios para los curiosos.
Un emoji, un dibujo tuyo, una manito. Cambia todo el ambiente con una sola línea (data-fs-cursor).
Pide las imágenes en WebP y no muy grandes. Una web divertida que tarda un minuto en cargar deja de ser divertida.
Pide "texto alternativo en las imágenes" y que respete "prefers-reduced-motion", para que también puedan entrar las personas a las que el movimiento marea. El kit ya hace lo segundo.
Pon links a las webs que amas. Lo contrario de una plataforma: una web que se alegra cuando te vas a descubrir otra cosa.
Hazme un solo archivo index.html con el CSS y el JavaScript adentro. Es mi web personal. Carga el funscroll kit (https://funscroll.life/kit/funscroll.css y https://funscroll.life/kit/funscroll.js) y usa sus atributos data-fs-*. Quiero mi nombre gigante con data-fs-letters="scatter", unas frases sobre mí que aparezcan con data-fs-reveal, y una pantalla final que se despida. Colores: [tus colores]. Tipografías: [tus tipografías].
Convierte esta lista de mis obras en una página donde las imágenes floten (data-fs-float), se puedan arrastrar (data-fs-drag) y se muevan a distintas velocidades al scrollear (data-fs-parallax con valores entre -0.6 y 0.6). Sin grilla: acomódalas como un collage. Al hacer click en una imagen, se abre en grande.
Haz una página para estos poemas donde cada uno aparezca lento, una línea a la vez, dentro de una sección con data-fs-slow="0.25". Mucho espacio vacío, una sola tipografía, y al final un botón que lleve a quien lee a una web al azar de esta lista: [links].
En mi teléfono [describe lo que ves]. Yo esperaba [lo que querías]. Arregla solo eso, no cambies nada más, y explícame en palabras simples qué estaba mal.
Cada efecto es un atributo, y cada uno prueba una idea del manifiesto. Mézclalos, rómpelos, hazlos tuyos.
Las cosas llegan cuando entran en pantalla, desde donde tú quieras.
<div data-fs-reveal="left">…</div>
<!-- up · down · left · right · pop · spin -->
El texto se separa en letras que juegan con el scroll. scatter se arma en el centro de la pantalla, wave hace olas y dance reacciona a la velocidad de tu scroll.
<h1 data-fs-letters="dance">hello</h1>
<!-- scatter · wave · dance -->
El elemento completo se inclina y tambalea con la velocidad de tu scroll. Si paras, descansa.
<div data-fs-dance>…</div>
Las capas se mueven más rápido, más lento, de lado o en círculos mientras scrolleas. Profundidad, de la forma fácil.
<div data-fs-parallax="-0.5">…</div> <div data-fs-parallax-x="0.8">…</div> <div data-fs-spin="360">…</div>
Float flota para siempre, sin razón. Jelly se aplasta cuando lo tocas.
<img data-fs-float src="…"> <button data-fs-jelly>squish</button>
Deja que la gente reordene tu página. También es suya.
<div data-fs-drag>…</div>
En el teléfono, las cosas se inclinan cuando inclinas el aparato. En la compu, siguen al mouse. El iPhone pide permiso, así que llama a FS.enableTilt() desde un botón.
<div data-fs-tilt="30">…</div> <button onclick="FS.enableTilt()">tilt!</button>
Cualquier emoji se vuelve el cursor dentro de un elemento.
<section data-fs-cursor="🍓">…</section>
Un botón que lleva a la gente a un lugar al azar, fuera de tu web. El botón anti-retención.
<a data-fs-door='["https://neal.fun/deep-sea/", "https://zzz.zoomquilt.org"]'>surprise me</a>
Convierte una sección en un paseo de lado, o ralentízala para que el tiempo se sienta distinto. La home usa las dos.
<section data-fs-horizontal>
<div class="fs-sticky">
<div data-fs-track>…panels…</div>
</div>
</section>
<section data-fs-slow="0.3">
<div class="fs-sticky">
<div data-fs-track>…</div>
</div>
</section>
<!-- una barra que se llena a medida que la página termina -->
<div data-fs-progress style="position:fixed;…"></div>
Todo lo que necesitas para contar que tu web es funscrolleable: elige un badge, copia el código y listo.
this-is-a-funscroll-site-redondo-amarillo.png
este-es-un-sitio-funscroll-redondo-amarillo.png
this-is-a-funscroll-site-scrollcito-transparente.png
este-es-un-sitio-funscroll-scrollcito-transparente.png
this-is-a-funscroll-site-scrollcito-transparente-blanco.png
este-es-un-sitio-funscroll-scrollcito-transparente-blanco.png
badge-88x31.png
logo-redondo-amarillo.png
mascota-transparente.png
logo-funscroll-transparente.png
perfil-redes-amarillo.png
<!-- un badge chiquito en una esquina (el botón clásico de 88×31) --> <a href="https://funscroll.life"><img src="https://funscroll.life/assets/img/badge-176x62.png" width="88" height="31" alt="funscrollable"></a> <!-- o uno más grande (usa la versión "blanco" sobre fondos oscuros) --> <a href="https://funscroll.life"><img src="https://funscroll.life/assets/media/este-es-un-sitio-funscroll-redondo-amarillo.png" width="140" alt="este es un sitio funscroll"></a> <!-- el webring: anterior · al azar · siguiente --> <div id="funscroll-ring"></div> <script src="https://funscroll.life/kit/ring.js" defer></script>
¿Hiciste algo? Únete al funscroll ring →