LM-17Fintech

Obsidian

A titanium card concept for private finance, built in code.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A concept site for OBSIDIAN, a made-up private finance brand, built around a titanium card drawn live with three.js. The card turns slowly in the hero and follows a drag, and across a pinned three-chapter scroll it opens into front, core and back layers. In the atelier, visitors pick one of three finishes, engrave a name, move the studio light, inspect the card in a fullscreen studio with zoom and save a PNG portrait of their edition. Between these sit a material study with hotspots, a sample account preview (tabs, a currency switch, a scrubbable chart and a privacy toggle) and a violet globe that turns to Tokyo, Copenhagen or New York, with routes arcing between them. The card, its engraved faces and the globe are built in code; the backdrops and editorial photos are five generated images. For fintech and card brands, private banks, wealth managers and membership clubs.

How it's made

  1. A card at real proportions

    The body is a 4.28 x 2.7 rounded rectangle, a bank card's ratio, extruded with a polished bevel. Separate front and back faces, a recessed chip, its frame and seven contact lines sit on top.

  2. Faces printed at load

    Each face is a 2,048 x 1,290 canvas with 1,290 brushed lines, 62 contour rings, the wordmark and the visitor's engraving. A matching grey canvas drives roughness and bump so the engraving catches light, and both canvases redraw when the finish or name changes.

  3. A studio with no photos

    Four glowing panels are rendered once through a PMREM generator for the reflections, under filmic tone mapping. The light slider rotates that studio and moves the key light.

  4. The card comes apart

    In the pinned craft section the scroll opens the card into a front plate, a core with six antenna loops and a back plate, up to 1.45 units either side, while the copy steps through three chapters.

  5. A globe from two shaders

    A 96 x 64 sphere shades land from a mask with diffuse light, a rim and a glint, inside an additive atmosphere shell. On top are grid lines every 30 degrees, three pulsing city markers and great-circle routes that arc 0.3 units high, with dots travelling between the cities.

  6. An account with no account

    Balances, charts and transactions are fixed sample data. The 28-point chart redraws for each tab and range, can be scrubbed with the pointer or arrow keys, converts at fixed USD, EUR and GBP rates and hides behind a privacy toggle.

  7. Saving an edition

    The finish and engraving are kept in the browser, and Save composes a 1,600 x 1,900 PNG from the live render. The four WebGL views draw only while on screen, at up to a 2x pixel ratio.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • third-party-notices/

  • provenance-notes/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.js

  • README.md

    Start here. What's inside and how to run it.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

  • ASSETS.md

    Asset list. Every image and font in the kit, where it came from and its license.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • DEPENDENCIES.md

  • VERIFICATION.md

  • FILE_MANIFEST.md

  • SOURCE_HASHES.json

  • font-sources.json

See a real zip, opened

Specs

Stack
Vite 8.0 · three.js 0.186 (vendored) · JavaScript (ES modules) · Plain CSS · GLSL shaders · Procedural geometry · Self-hosted DM Sans and Manrope
File size
3.9 MB
Triangles
22,564
Load time
2.5 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2. Tested in Chrome on desktop at 1440 x 900; Safari, Firefox and real phones not tested yet.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand.

Unlimited client projects, one person per license, no resale. Read the license

The card, its brushed and engraved faces, the chip, the reflection studio and the globe are generated in code, with no model files. The five images were made with ChatGPT's image generator, and the globe's land mask is a Solar System Scope map adapted under CC BY 4.0 and credited in the footer.

Buy LM-17 Obsidian

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.