Assize

Assize es una plantilla para boutiques de apelación, despachos de litigio y cualquier práctica de servicios profesionales cuyo producto es el argumento escrito. Doce plantillas de página cubren áreas de práctica con páginas de detalle, un docket de resultados anclado en estadísticas, fichas de abogados con aside sticky de admisiones, una sección de insights con formato de revista científica y artículos long-form, nosotros, contacto, una página legal de publicidad de abogados y un 404 que no se sale del personaje. La firma es The Redline: el hero es un párrafo de boilerplate de la contraparte que se corrige en vivo mientras haces scroll, los tachados se dibujan, se abre un caret, se compone lenguaje más preciso y las notas al margen se acumulan en un rail persistente. Incluye dos skins diseñados, Record (piedra caliza) y Bench (tinta), verificados en contraste AA en lugar de invertidos automáticamente. Cinco colecciones de contenido tipadas con Zod se referencian entre sí, y toda la animación resuelve a un estado estático legible en touch o reduced motion.

Qué incluye

• 12 plantillas de página, Inicio, Práctica, Área de Práctica, Resultados, Abogados, Ficha de Abogado, Insights, Artículo, Nosotros, Contacto, Avisos Legales, 404
• The Redline, un párrafo hero ligado a scrub de scroll que se tacha sus propias vaguedades, abre un caret y compone en su lugar la frase de reemplazo más precisa
• La animación del redline se impulsa con custom properties de CSS (–strike, –caret, –insert-o) animadas con GSAP, así el pintado lo hace CSS y nada queda estampado inline antes de la hidratación
• Rail de márgenes, cuatro anotaciones estilo docket (¶ 1 a ¶ 4), una de ellas con cita de regla, que aparecen en posiciones fijas del mismo timeline de scroll
• gsap.matchMedia limita el pin solo a desktop con puntero fine, touch, viewports estrechos y reduced motion aterrizan directo en el estado final sin pin-spacer muerto
• Dos skins diseñados, Record (piedra caliza) y Bench (tinta), conmutables desde el nav y persistidos en localStorage; los roles se rediseñan por skin, no se invierten automáticamente, y ambos están verificados AA

La firma

El hero es un párrafo de boilerplate de la contraparte, y el scroll lo edita delante de ti: los tachados se dibujan de izquierda a derecha sobre las vaguedades, se abre un caret y la frase de reemplazo más precisa se compone en tinta madder mientras las notas al margen se acumulan en un rail de docket. Es un único ScrollTrigger fijado con scrub de 1, animando custom properties de CSS en lugar de estilos inline. La sección cierra elevando el contenido mientras la banda verde sube a tragarse la página, secuenciado para que el texto nunca quede varado en contraste insuficiente.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/assize/. 12 páginas, hecha con Astro 7, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.