ns-frame0.18Empezar

Dale forma a
cualquier elemento.

Chaflanes, muescas, squircles y mosaicos de piezas que encajan, con una línea de HTML. 11 KB, sin imágenes y sin dependencias.

EmpezarVer el código en GitHub
  • 0 dependencias
  • 10,9 KB gzip
  • CSP estricta, sin innerHTML
  • HTML, Astro, React, Vue, Svelte
  • Apache-2.0
Valle con montañas al amanecer
Vista previaCosta norte, 06:12
Este huecoHexágono
Radio
46 px
Hueco
12 px
Esquinas
12 px
--ns-orb: 3 3 46 hex
Editando ahora
Una línea
<article
  data-ns="all squircle 28">
Al pulsar
ReproduciendoGeometría nocturna

Lo que antes era un SVG a mano, ahora es un atributo.

El mismo componente, dos maneras. Con ns-frame el borde es real, sigue al recorte, se anima al pasar el puntero y no se deforma a ningún tamaño.

Sin ns-frameCSS + SVG + JS · 3 archivos
/* 1. recorte: se deforma al cambiar el tamaño */
.card { clip-path: polygon(24px 0, 100% 0,
  100% calc(100% - 24px), calc(100% - 24px) 100%,
  0 100%, 0 24px); }
/* 2. el borde no sigue el recorte: otro SVG */
.card::before { content: ""; position: absolute;
  inset: 0; background: url(borde-card.svg); }
/* 3. esquinas redondeadas en un chaflán: imposible */
/* 4. hover: otro polygon() y otro SVG */
/* 5. el foco del teclado sigue siendo un rectángulo */
Con ns-frame1 atributo
<article data-ns="tl+br bevel 24; radius 3"
         data-ns-hover="all bevel 12; radius 3">
Resultado en vivo · pasa el punteroBorde real, radio en el chaflán y morph

Para diseño

Chaflanes con radio, muescas, tickets y mosaicos que encajan. Lo que antes se exportaba como imagen ahora se escribe.

tl+br bevel 22; radius 3

Para desarrollo

Un atributo HTML. Sirve en HTML plano, Astro, React, Vue o Svelte, sin build ni dependencias.

all round 20; top cut center 36% 8 r3

Responsive de verdad

Los cortes miden píxeles y no se deforman. Con @<420 la forma cambia según el ancho del propio componente.

left+right scoop center 26 13; all round 14

Accesible y segura

El foco sigue la forma, respeta el movimiento reducido y funciona con una CSP estricta, sin innerHTML.

tl bevel 30; br bevel 30; tr+bl round 16; radius 3

Una línea.
Cualquier forma.

Esquinas, muescas en los bordes y radios en cada vértice, sobre cualquier elemento: una tarjeta, un botón, una imagen o un vídeo. Al cambiar de forma, se anima sola.

Dunas al atardecer
Ruta de las dunasRecorrido de 12 km · 4 hReservar
<article data-ns="tl+br bevel 36; radius 4">
Costa al atardecer
bevel + round + cut
Montañas con niebla
scoop: radio invertido
Calle de noche
notch con radio

14 formas listas, o la tuya en una línea

Toda la sintaxis

Diseña tu forma.

Escribe la forma, arrastra la esquina de la vista previa y copia el resultado: el atributo, la ruta SVG a ese tamaño o CSS puro con shape(), sin JavaScript.

Presets
arrastra la esquina ↘
HTML
CSS · clip-path: shape() · cero JS
Ruta SVG · tamaño actual
Bordes y luz que siguen la forma.
--ns-border acepta un color o un degradado, y puede girar. La luz en U abraza la base, el halo sale por el contorno y los patrones quedan recortados por la pieza. Todo es CSS: sin imágenes y sin repintar.
Degradado que gira
Un linear-gradient() en el borde, girando sobre el contorno exacto.
--ns-border: linear-gradient(…) · data-ns-spin
Luz en U
Llena la base con las esquinas y se desvanece hacia arriba.
ns-u
Doble línea
Un segundo contorno, paralelo al primero.
--ns-inner: 6px
Halo
La sombra también sigue la forma.
ns-halo
Luz que desciende
Desde arriba, sobre una retícula recortada.
ns-u-top · ns-grid
La luz trepa por los bordes
Base, costados y esquinas se mueven a la vez, con curvas suaves.
ns-u-surge
Starter
0 € / mes
  • 3 proyectos
  • Todas las formas
  • Soporte de la comunidad
Empezar
ProRecomendado
12 € / mes
  • Proyectos ilimitados
  • Formas propias con define()
  • Exportar a CSS shape()
  • Soporte prioritario
Elegir Pro
Equipo
39 € / mes
  • Todo lo de Pro
  • Tokens de diseño compartidos
  • Inicio de sesión único
Hablar con ventas
Puntosns-dots
Retículans-grid
Escamasns-scales
Rayasns-stripes
Barridons-scan
Destellons-shimmer
Pulsons-pulse
Líneasns-lines
Texto con brillons-text-shimmer
DESCIFRA_42data-ns-decode
Todos los efectos
Piezas que encajan.

      Un bento donde cada pieza puede ser una L, una T o una escalera. Las curvas guardan el mismo hueco que las rectas, y un orbe recorta a sus vecinas. En el móvil sigue siendo un mosaico, no una lista.
Formas que se abrazan.
La plantilla vive en CSS: cámbiala con una media query y las piezas se reacomodan.
Fachada de edificios antiguos
Fotos con forma
La imagen se recorta con la pieza.
Pesa 9 KB
Un módulo opcional, con gzip.
Hueco constante
La esquina cóncava mide el radio más el hueco.
Dos columnas en el móvil
Sigue siendo un mosaico.
Orbes con forma
--ns-orb: 3 3 96 hex
Texto que fluye
En una L, una escalera o junto al orbe, el texto recorre toda la figura con el mismo margen.
Sólo HTML y CSS
Sin framework.
El orden del DOM no cambia: se lee igual con lector de pantalla.
Ciudad de noche
99,9 %disponibilidad
Cómo funciona el mosaico
Lo que CSS todavía no sabe hacer.

      Cuatro cosas que la web lleva años pidiendo y que hoy sólo se imitan con capturas, filtros borrosos o números a mano. Aquí son geometría real: nítidas, animables, accesibles y con CSP estricta.
Muelle de madera sobre un lago al atardecer
Cabaña del lagoBled · 3 noches
Esquinas concéntricas
La foto y el botón repiten la forma de la tarjeta menos el hueco: el redondeo pierde el hueco entero y el chaflán, 0,59 veces. Cambia el hueco y todo se recalcula. CSS no tiene nada parecido, y SwiftUI sólo lo hace con redondeos.
data-ns-concentric
El texto llena la forma. Cada línea mide lo que le deja el contorno, con el mismo margen en las diagonales, en las curvas y en los vértices. CSS lo especificó hace más de diez años con shape-inside y ningún navegador lo ha implementado.
Texto que llena la forma
El contorno real se mide y el navegador acomoda cada línea entre dos bordes invisibles. El texto sigue siendo texto: se selecciona, se traduce y se lee en orden.
data-ns-flow
Titulares con un resaltado que abraza cada línea y se adapta mientras escribes
Escribe en el texto verde
Resaltado continuo
Un solo contorno para todas las líneas, con curvas hacia fuera y hacia dentro donde una línea es más corta. Hasta ahora se imitaba con un filtro de desenfoque: bordes borrosos y sin trazo posible.
data-ns-mark
Formas líquidas y vidrio
Elementos cercanos se funden con un puente curvo y se separan en gotas al alejarse. En vidrio, el fondo se desenfoca dentro de la forma exacta y el borde recoge la luz. Es un contorno vectorial calculado en cada frame del movimiento, no un filtro de desenfoque sobre píxeles. Arrastra el indicador entre las pestañas: se levanta como una lente y encaja al soltarlo.
data-ns-liquid="glass" · data-ns-tabs
Inicio
Dunas al amanecerDesierto · hace 2 h
La ciudad de nocheCentro · hace 5 h
Niebla en el bosqueMontaña · ayer
Mar de fondoCosta · ayer
Cumbre nevadaCordillera · hace 3 días
Barra de pestañas de vidrio
Como la de un sistema móvil. Pulsa una pestaña y el indicador viaja con un muelle, se estira con la velocidad y deja una gota que se funde. Arrástralo y se levanta: crece y se vuelve una lente clara que aumenta lo que pasa por debajo; al soltarlo encaja en la pestaña más cercana. Desplaza el feed: el contenido pasa de verdad por detrás del vidrio, también en Safari.
Teclado, lectores de pantalla y movimiento reducido incluidos.
data-ns-tabs · ns-frame/tabs
Luz en UVidrio que recoge la luzLa luz sube desde la base y dobla por los costados.
Luz en U sobre vidrio
Una pieza de vidrio con la forma que quieras recoge una luz que sube desde la base, dobla por los costados y enciende el borde. Elige cómo se mueve (con pestañas de vidrio), su color y su intensidad: son clases y variables de la librería, nada hecho a mano.
data-ns-glass · class="ns-u ns-u-live" · --ns-u · --ns-u-glow · --ns-u-time
Cómo usarlos
Luz que recorre el borde.

      Un atributo, data-ns-motion. Recorre el contorno exacto de cualquier forma, se combina ("scan march"), se colorea con --ns-motion y se pausa fuera de pantalla o si el sistema pide menos movimiento.
CometaLuz corta con estela"comet"
Dos lucesCarga o espera"twin"
ÓrbitaDestellos alrededor"orbit"
BarridoCruza el marco"scan"
Barrido en altoEn una forma alta cruza en diagonal, sin pausas"scan"
PersecuciónPulsos de datos"chase"
PulsoEl borde respira"pulse"
TrazoSe dibuja y se borra"loop"
MarchaZona para soltar"march"
InterferenciaError o alerta"glitch"
FocoSigue al puntero"spot"
Al pasarSólo con el puntero"twin hover"
64 %"progress"
Todas las opciones de movimiento
Componentes listos, con su forma.

      Usan lo que el navegador ya sabe hacer: popover, <dialog>, la capa superior y el desplazamiento nativo. El foco, el teclado y los lectores de pantalla funcionan como siempre.
Popover con flecha
La flecha es parte del contorno y apunta al botón aunque el navegador lo voltee.
Popover nativo
Esc o un clic fuera lo cierran.
Estado presionado
La forma responde al puntero, al dedo y a Enter o Espacio.
Diálogos que se despliegan
Abren y cierran respetando los cortes: el borde acompaña y el contenido se revela recortado.
Avisos
El tiempo restante se consume en el borde y se pausa al pasar el puntero.
Carga sin saltos
El esqueleto se mide sobre el componente real, con sus cortes.
Informe semanalLatencia media: 84 ms
Hoja que se arrastra
Como en una app nativa: sigue al dedo o al ratón, se estira arriba y se cierra al soltarla o lanzarla. ns-frame/sheet, 1,7 KB.
Carrusel con forma
El gesto y el ajuste son los del sistema. La diapositiva que llega al centro cambia de silueta (morph) y su rótulo es vidrio sobre la foto; flechas e indicadores con forma, también con teclado.
Sendero de montaña
Pico Espejo9 km · difícil
Lago entre montañas
Laguna Negra6 km · media
Costa rocosa
Playa Medina3 km · fácil
Bosque nublado
Bosque de Niebla7 km · media
data-ns-carousel-current · data-ns-carousel-shape · --ns-snap: center
Todos los componentes
Panel desplegado
Un <dialog> nativo: foco atrapado y Esc para cerrar. ns-frame sólo añade la apertura con open(el, modo) y el cierre con close(el, modo).
Compartir la ruta
Arrástrala hacia abajo para cerrarla, o tira hacia arriba: se estira y vuelve.
Aperturas que respetan la forma.

      Paneles que entran al hacer scroll con data-ns-enter, y una tarjeta que se convierte en la vista de detalle con la View Transitions API: los cortes miden lo mismo durante todo el recorrido.
01
Se despliega
El panel se abre sin deformar sus cortes.
data-ns-enter="open"
02
Escalonado
Cada pieza entra un poco después que la anterior.
data-ns-enter="split 140"
03
Desde el centro
Se revela desde el centro, con la forma exacta.
data-ns-enter="iris 280"
Cada parte, una línea.

      Las anotaciones se unen a su destino con data-ns-link y se iluminan al pasar el puntero por cualquiera de los dos extremos. Y la forma puede cambiar según el ancho del propio componente, sin media queries.
    
Chaflán con radiotl+br bevel 22; radius 3
Forma al pulsardata-ns-press="all bevel 5"
Dunas al atardecer
Travesía por las dunas2 días · guía incluida
Muesca en el borderight cut center 28% 7 r3
Borde en degradado--ns-border: linear-gradient(…)
Forma según su propio ancho
Debajo de 420 px el panel pierde la muesca y reduce el chaflán. Mueve el control o arrastra el borde derecho.
panel; @<420 all bevel 10; @<420 top none
Tu propio polígono
Coordenadas en px, % o 100%-24; rN redondea ese vértice. Una flecha de «siguiente» en una sola línea:
Siguiente paso
poly 26 0 r4, 100%-56 0 r4, 100% 50% r3,
     100%-56 100% r4, 26 100% r4, 0 100%-26 r3, 0 26 r3
Pequeña, rápida y segura.
Un bento con ns-frame/bento: el corte grande sólo en las esquinas del conjunto, así toda la rejilla se lee como una sola pieza esculpida. Debajo, un fondo ns-aura.
Núcleo, con gzip10,9 KB
Formas, bordes, morph y foco. Cada módulo se carga sólo si se usa.
  • núcleo8,9
  • mosaico7,4
  • lite6,7
  • extras3,8
  • líquido2,5
  • skeleton2,4
  • concéntricas2,4
  • toast2,1
Sin dependencias
Ni una petición de red en tiempo de ejecución: todo lo dibuja el propio navegador.
4.000 marcos, menos de 50 ms
La tarea más larga al montarlos todos a la vez.
Segura con una CSP estricta
Sin innerHTML ni unsafe-inline: se prueba en cada versión con atributos maliciosos.
Accesible de serie
Foco con forma, alto contraste, movimiento reducido y RTL.
Con cualquier framework
Es un atributo HTML: HTML plano, Astro, React, Vue o Svelte. También compila a CSS shape() sin JS.
Software libre
Licencia Apache-2.0, de Kodec Agency.
Cómo se midió
Empieza en un minuto.

        Un script y un atributo. Funciona con HTML plano, Astro, React, Vue o Svelte.
      
<script type="module" src="https://cdn.jsdelivr.net/gh/kodecagency/ns-frame@v0.18.1/packages/ns-frame/dist/ns-frame.js"></script>
Leer la documentaciónVer el código en GitHub