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 — hover a card and 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 — mount an element, 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, 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 — analytic vertex normals, clipping-plane construction, gaussian dock falloff, spring needle physics — in code short enough to actually read
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production — 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 and ten framework-free instruments — npm install, npm run dev, and the shelf is live.
- The full catalog shell: 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), three DOM (Liquid Button, Magnetic Dock, Odometer)
- The source pipeline: every page shows the instrument’s exact file via raw imports, with a usage tab, one-click copy and a download button — plus 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 & branding system
The design brief was a hardware catalog — instruments on a shelf, specifications on the page.
- Studio-dark tokens with a single gold accent and hairline borders — 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, DOM violet — so the grid reads as an inventory at a glance
- Inter for the chrome, JetBrains Mono for the source panes; the wordmark is the name and a gold full stop
Mobile & speed optimization
The catalog composes itself for a phone; 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, dials stop wandering — while deliberate interaction still answers
How this template helps you convert
The page earns attention before it asks for anything — the same conversion logic the OGtraplord homepage runs on.
- The strongest visual moment loads first, so a visitor forms a positive impression before reading a word
- Every section answers one question and hands off to the next, keeping scroll momentum toward the call to action
- The ask arrives only after the proof — by the time a visitor reaches 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 deliberately framework-free — 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 + Vite; the instruments are deliberately not — each 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, spire) share vendored Three.js; 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 own ten instruments distilled from the studio’s shipped work (บัว BUA, FORCE, ยอด YOT, FIRST LIGHT, Spiral Gallery, Scroll Film Studio), its own shell, code and copy.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
