Tipografía variable por proximidad
Efecto de texto con fuente variable: las letras engordan de finísimas a ultranegras y crecen al acercarse el cursor, en una ola de aumento. Título hero interactivo.
Prompt · cambia [TEXTO]
UniversalCompón [TEXTO] grande en minúsculas neogrotescas limpias con eje de peso variable, blanco sobre azul ultramar profundo. El peso de cada letra depende de su distancia al cursor: las lejanas son finísimas; las más cercanas engordan hasta ultranegra, crecen hasta un tercio más desde la línea base y se tiñen de verde lima ácido, con una atenuación suave en campana para que la palabra se recoloque como una ola de aumento. En reposo, un punto invisible recorre despacio la palabra y una suave ola de peso la atraviesa sin parar. Con el cursor encima, la campana se estrecha y el efecto se duplica, siguiéndolo con un retraso algo elástico; al irse, las letras adelgazan de nuevo en un segundo. Un clic lanza un pulso de peso que se propaga por las letras. Muestra una fina curva de atenuación arriba y barras de peso abajo. En pantallas táctiles, sigue al dedo.Set [TEXT] large in a clean neo-grotesque lowercase with a variable weight axis, white on a deep ultramarine background. Every letter's weight depends on its distance to the pointer: far letters are hairline thin, the nearest swell to ultra-black, grow up to a third taller from the baseline and tint acid lime, with a smooth bell-shaped falloff so the word reflows like a magnifying wave. At rest an invisible point drifts slowly along the word so a soft weight wave keeps rolling through it. On hover the bell tightens and the effect doubles, tracking the pointer with a slightly springy lag; when the pointer leaves the letters thin out again within a second. A press sends a weight pulse rippling outward through the letters. Show a thin falloff curve above and weight bars below. Touch follows the finger.
ADN visual
- Minúsculas neogrotescas en blanco sobre azul ultramar profundo
- El eje de peso sigue la cercanía del cursor: finísima lejos, ultranegra cerca
- Las letras más cercanas crecen en altura y se tiñen de verde lima ácido
- Las vecinas se recolocan al cambiar de ancho, como una barra de apps con lupa
- Curva de atenuación y barras de peso en vivo, como en un muestrario tipográfico
- Categoría
- Estilos reactivos
- Demo hecha con
- CSS
- Energía
- Dinámico
- Fondo
- Oscuro
También conocido como
Apoyo
Mantén aimotions gratis
Invítame a un café Sin muros de pago ni registro. Si un prompt te ha ahorrado una hora, un café ayuda a que sigan llegando estilos nuevos.
Teclas: ← → navegar · C copiar
