OBSCURA — Creative Studio
We make the unseen unforgettable.
The catalog's flagship: a cinematic, award-grade portfolio for a top-tier creative & design studio — a dark-room world with a generative animated aperture hero, a custom magnetic cursor, a GSAP pinned horizontal showcase, scroll-driven case studies, kinetic type and coloured shutter page transitions. Every visual is procedural (no external images) and every effect has a reduced-motion fallback.
Role · Design & build — generative art system, motion choreography, front-end engineering · Updated Jun 2026
- Full Next.js 15 source — Home, Work index, 7 filterable case studies, Services, Studio, Contact, on-brand 404
- A generative art system (Canvas hero + 7 SVG project motifs + team portraits) you can re-seed and re-skin
- A reusable motion toolkit — custom cursor, magnetic CTAs, GSAP pin/horizontal helpers, text reveals, marquees, shutter transition
- A typed content layer (projects, services, team, awards) + a validated demo inquiry form
- Delivery
- 48–72h
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · Forms / CMS
Projects, services, team and awards are a typed content layer; the project-inquiry form wires to any endpoint — connect a headless CMS to manage case studies.
Delivered as full Next.js source. Re-seed the generative art, swap in your projects, and wire the inquiry form to your endpoint.
What makes it special
A generative hero that reacts to you
A software-rendered Canvas particle field flows into a lens aperture and bends away from your pointer — throttled, DPR-capped, paused offscreen. Reduced motion swaps in a crisp static aperture.
Six orchestrated signature moments
A custom magnetic cursor, a GSAP pinned horizontal showcase, scroll-driven case studies, word-by-word kinetic reveals, marquees and a coloured shutter page-wipe — each with an instant, usable fallback.
Procedural art, zero stock photography
Seven case studies each get a distinct motif and signature gradient, rendered as deterministic SVG seeded from the slug — varied, on-brand and crisp at 4K.
Accessible by design
Semantic landmarks, ordered headings, a skip link, a focus-trapped menu, focus-visible rings, text alternatives for every generative visual and a custom cursor that never traps keyboard users.
Fast and static
A fully exportable static site — transform/opacity-only animation, ~0 CLS, self-hosted fonts with no external requests, and verified 0 console errors from 375px through 4K, in full-motion and reduced-motion.
What’s included
- Full Next.js 15 source — Home, Work index, 7 filterable case studies, Services, Studio, Contact, on-brand 404
- A generative art system (Canvas hero + 7 SVG project motifs + team portraits) you can re-seed and re-skin
- A reusable motion toolkit — custom cursor, magnetic CTAs, GSAP pin/horizontal helpers, text reveals, marquees, shutter transition
- A typed content layer (projects, services, team, awards) + a validated demo inquiry form
- SEO + a11y baked in — per-page metadata, Organization/CreativeWork JSON-LD, sitemap, robots, manifest — README + PROGRESS
Gallery
More Agency & Creative templates
Make OBSCURA yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.