Graduated grids
Squares that step, swell, and shear. A Movement-in-Squares field from layered gradients.
Pure-CSS pattern engine
Illusions, engineered to the pixel
OPTIKA compiles Riley-grade stripes, Vasarely targets, and graduated grids into resolution-independent CSS. No images, no canvas — just math.
Capabilities
Optics, systematized
Three primitives, infinite permutations — every pattern ships as a handful of gradient lines.
Concentric targets
Vasarely rings at any pitch — circle-safe, retina-safe, inverted by one variable.
Zero-raster motion
Illusions as pure math: bytes not megapixels, sharp at any zoom, dark-mode native.
Process
Three moves to motion
Declare
Set pattern tokens once — pitch, ink, angle. OPTIKA compiles them to layered gradients.
Preview
Flip light and dark ink live and stress-test vibration against the reduced-motion safeguard.
Ship
Export copy-paste CSS with focus states, contrast pairs, and inverted variants bundled in.
Pricing
Pick your pitch
Every plan exports production-ready CSS. Cancel whenever the illusion fades.
Draft
$0 /mo
- 3 pattern presets
- 1 project
- Community support
- No ink inversion
Most popular
Studio
$18 /mo
- Unlimited patterns
- Ink inversion
- Reduced-motion exports
- Priority support
Atelier
$49 /mo
- Everything in Studio
- Custom easing curves
- White-glove migration
- SSO and audit logs
Testimonials
Word from the studio floor
Our landing page vibrates with energy and still weighs four kilobytes of CSS. OPTIKA is the closest thing to a time machine back to 1965.
Creative Director, Studio Vertex
I shipped an op-art campaign site in an afternoon. Dark-mode ink inversion is one class. One.
Frontend Lead, Gridwork Labs
FAQ
Straight answers, sharp edges
Are the patterns really pure CSS?
Yes — every stripe, ring, and grid is a repeating gradient. No images, no canvas, no JavaScript paint calls.
Won’t high-contrast stripes risk photosensitivity?
All animation is gated behind prefers-reduced-motion, and tight vibrating fills swap to solid bands. Patterns are static by default.
How does dark mode invert the art?
Ink is one CSS variable. Flip it once and every stripe, ring, border, and hard shadow inverts together.
Put movement in your squares
Join the early-access list — founding studios lock the launch rate for life.