Live Project

LaunchKit

Legal Document Generator

A free, premium legal document generator with a Spotify-inspired dark theme. Generate privacy policies, terms of service, and 13 other document types in under 60 seconds.

15
Documents
<60s
Generation
60fps
Animations
PWA
Installable

Tech Stack

Next.js 14React 18TypeScriptTailwind CSSFramer MotionRadix UIPWA
The Challenge

Legal Docs That Don't Suck

Build a premium document generator that's free, fast, and beautiful—proving legal tools don't have to be ugly or expensive.

Approach

Design Philosophy

Spotify-Inspired Theme

Dark background with signature green (#22c55e) accents. Premium feel without the premium price.

Glass Morphism

Frosted glass cards with backdrop blur, subtle borders, and layered shadows for depth.

Polished Animations

Staggered fade-ins, press-scale interactions, and smooth transitions throughout.

DM Sans + Instrument Serif

Clean sans-serif for body text paired with editorial italic serif for headlines.

Features

Key Capabilities

15 Document Types

Privacy policies, terms of service, NDAs, GDPR checklists, and more.

GDPR & CCPA Ready

All templates designed for compliance with major privacy regulations.

Instant Generation

Client-side processing means documents generate in under 60 seconds.

Multiple Exports

Download as Markdown, HTML, or copy directly to clipboard.

No Account Required

Generate unlimited documents without signup or payment.

PWA Support

Install as an app on iOS and Android for quick access.

Technical Deep Dive

The Safari Challenge

During testing, I discovered severe performance issues on Safari and iOS—animations stuttered, backdrop-blur flickered, and accordions broke. Here's how I fixed it.

Animation Lag

GPU acceleration via translate3d(0,0,0) and backface-visibility: hidden

Backdrop-blur Flickering

isolation: isolate creates new stacking context, fixes WebKit rendering

Accordion Height Bugs

Switched from CSS max-height transitions to conditional rendering

Dynamic Content Issues

MutationObserver auto-fixes elements added after initial render

Three-Part Solution Architecture

1. CSS Layer

safari-performance.css

GPU acceleration classes (.gpu-boost, .blur-fix) with translate3d and isolation.

2. Runtime Layer

safari.ts

Browser detection + MutationObserver to auto-fix dynamically rendered elements.

3. Component Layer

motion.tsx

Safari-safe Framer Motion wrappers with adjusted timing and GPU hints.

Results

The Outcome

A polished, production-grade legal document generator built in 2 weeks. The Safari optimization work produced a reusable "Safari Performance Starter Kit" that can be dropped into any future project.

2 Weeks
Build Time
0
Safari Bugs
15 Types
Documents
Free
Cost

Need a Custom Web Application?

I build fast, polished web apps with attention to detail—including cross-browser compatibility and mobile optimization.

Performance-firstMobile optimizedSafari testedTypeScript