Assize

Assize is a template for appellate boutiques, litigation firms, and any professional-services practice whose product is written argument. Twelve page templates cover practice areas with detail pages, a stat-anchored results docket, attorney bios with sticky admissions asides, a scientific-journal insights section with long-form articles, about, contact, an attorney-advertising legal page, and a 404 that stays in character. The signature is The Redline: the hero is a paragraph of opposing-counsel boilerplate that gets marked up live as you scroll, strikes draw through, a caret opens, tighter language sets itself, and margin notes accumulate down a persistent rail. Two designed skins ship, Record (limestone) and Bench (ink), each verified for AA contrast rather than auto-inverted. Five Zod-typed content collections cross-reference each other, and every animation resolves to a readable static state on touch or reduced motion.

What’s inside

• 12 page templates, Home, Practice, Practice Area, Results, Attorneys, Attorney Bio, Insights, Insight Article, About, Contact, Legal Notices, 404
• The Redline, a scroll-scrubbed hero paragraph that strikes its own hedges through, opens a caret, and sets the tighter replacement sentence in its place
• Redline animation is driven by CSS custom properties (–strike, –caret, –insert-o) tweened with GSAP, so CSS does the painting and nothing is inline-stamped before hydration
• Margin rail, four docket-style annotations (¶ 1 to ¶ 4), one of them carrying a rule citation, that fade in at fixed positions on the same scroll timeline
• gsap.matchMedia gates the pin to fine-pointer desktop only, touch, narrow viewports and reduced motion land directly on the finished end state with no dead pin-spacer
• Two designed skins, Record (limestone) and Bench (ink), toggled from the nav and persisted in localStorage; roles are re-designed per skin, not auto-inverted, and both are verified AA

The signature

The hero is a paragraph of opposing-counsel boilerplate, and scrolling edits it in front of you: strikes draw left to right through the hedges, a caret opens, and the tighter replacement sentence sets itself in madder ink while margin notes accumulate down a docket rail. It is one pinned ScrollTrigger with a scrub of 1, animating CSS custom properties rather than inline styles. The section closes by lifting the content out as the green band rises to swallow the page, sequenced so text is never stranded at failing contrast.

See it live

The demo is public: https://fpsjago.github.io/assize/. 12 pages, built with Astro 7, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.