Quick summary
OGKIT is the studio’s component shelf: ten interface instruments distilled from shipped templates and put in a catalog you can play. The browse grid sleeps until you reach it, and when you hover a card, the instrument wakes live inside it. Open one and it fills a stage with variant chips (the pond in Dawn, Rain, or Ink; the spire as chedi, prang, or needle), while the source sits underneath in full: the exact file, a usage tab, a copy button, and a download. Every instrument is one dependency-light file with the same contract. You mount an element and get a cleanup function back, so what you see on the stage is precisely what you paste into your own build.
Who this template is for
This build is for anyone who ships interfaces: a developer who wants serious components without a framework tax, a studio that wants its craft browsable, or a buyer who wants to see exactly what the code is before taking it.
- Developers who want drop-in wow (shader water, a helix gallery, a self-building spire) as single files with one mount contract and no framework lock-in
- Studios and solo makers who want their own OGKIT: a catalog that turns shipped work into a browsable, copyable component shelf
- Design engineers who want worked references in code short enough to read: analytic vertex normals, clipping-plane construction, gaussian dock falloff, and spring needle physics
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production. You get interchangeable sections, stock imagery, and nothing that proves craft.
- Template marketplaces sell the same layouts to thousands of buyers, so nothing ends up feeling owned
- Buyers can usually preview a design but almost never see the exact instructions that produced it
- Teams need reference builds that survive contact with real content rather than lorem-ipsum mock-ups
What you get with this template
A Vite + React catalog plus ten framework-free instruments. Run npm install, then npm run dev, and the shelf is live.
- The full catalog shell: a browse grid with hover-to-wake live previews, search, tag filters, dark and light themes, and a stage page per instrument with variant chips
- Ten instruments as single ES modules: three WebGL (Living Water, Helix Gallery, Spire Builder), two canvas (Scrub Stage, Starfield Warp), two SVG (Instrument Dial, Draw Diagram), and three DOM (Liquid Button, Magnetic Dock, Odometer)
- The source pipeline: every page shows the instrument’s exact file through raw imports, with a usage tab, one-click copy, and a download button. There’s also a 19-beat Playwright QA walk
Page sections overview
| Section | Purpose |
|---|---|
| The mount contract | One function in, one function out. |
| The Living Water | The BUA wave engine as a drop-in surface. |
| The Spire Builder | A tower that raises itself through a cut plane. |
| The hover-wake grid | Cards sleep until you reach for them. |
| The source tabs | The product is the file itself. |
Design and branding system
The design brief was a hardware catalog, with instruments on a shelf and specifications on the page.
- Studio-dark tokens with a single gold accent and hairline borders. It’s the OGtraplord identity translated to a developer surface, with a full light theme on a toggle
- Tag chips color-coded by engine (WebGL blue, canvas green, SVG gold, and DOM violet) so the grid reads as an inventory at a glance
- Inter for the chrome and JetBrains Mono for the source panes. The wordmark is the name and a gold full stop
Mobile and speed optimization
The catalog composes itself for a phone, and the instruments come along.
- The grid drops to one column and cards keep their posters. Touch has no hover, so previews wait for the stage page instead of half-waking
- Every instrument watches its own container with a ResizeObserver and rebuilds its buffers on size, so stages stay sharp through rotation
- Reduced-motion visitors get settled scenes: the spire arrives built and stops re-rendering, the water calms, and the dials stop wandering. Deliberate interaction still answers
How this template helps you convert
The page earns attention before it asks for anything. The OGtraplord homepage runs on the same logic.
- The strongest visual moment loads first, so visitors like what they see before they read a word
- Every section answers one question and hands off to the next, which keeps the scroll moving toward the call to action
- The ask arrives only after the proof: by the time visitors reach it, the work has already made the argument
Other information about this template
A few notes before you build on this one.
- The shell is React + Vite, but the instruments are framework-free on purpose. They mount into anything (React, Vue, plain HTML) with the same three lines
- Only the three WebGL instruments depend on Three.js. The other seven have zero dependencies of any kind
- The genre, a maker’s own component catalog with live renderers, follows MengTo’s ThreeUI. This is an original build, with its own instruments distilled from the studio’s shipped templates
- A 19-beat Playwright walk screenshots every instrument mid-interaction (ring trails on the water, the warp held, the dock magnifying) and gates the deploy on a clean console
How it works
The shell is React and Vite, and the instruments deliberately aren’t. Each one is a single framework-free ES module that owns its canvas, listeners, and injected styles, and tears them all down on cleanup. Three WebGL instruments (water, helix, and spire) share vendored Three.js, and the other seven have zero dependencies. The water runs the BUA wave mathematics with analytic vertex normals. The spire raises a clipping plane through a lathe, with a ghost wireframe above and a profile-sized cap sealing the cut.
On its origins
The genre, a maker’s own component catalog with live renderers, follows MengTo’s ThreeUI product. This build is an original. Its ten instruments are distilled from the studio’s shipped work (บัว BUA, FORCE, ยอด YOT, FIRST LIGHT, Spiral Gallery, and Scroll-Film Studio), and its shell, code, and copy are its own.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
