Skip to content
Silk UI
Tech

Kairn — Technology ecosystem

A monochrome, editorial template for hardware and fintech brands, with a chrome-stone three.js hero, a horizontal product track and pixel-dissolve transitions.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Lenis
  • three.js
Live preview (opens in a new tab)Buy now $49$79

One-time payment · Instant download · All sales are final. By buying you agree to the License, Terms and Refund Policy.

silkui.com/page-preview/kairn
Kairn hero screenshot

Overview

Kairn is a monochrome, editorial website for a technology company that sells hardware, money tools or AI — or all three. Its hero is a three.js stack of polished chrome stones that tilts toward the cursor and lifts apart as you scroll.

Square pixel dissolves carry you between dark and light sections, and a horizontal product track turns vertical scrolling into a side-scrolling showcase on desktop.

Highlights

  • Chrome stones that split on scroll
  • Horizontal product track
  • Pixel-dissolve transitions
  • Full-screen menu

Screens

System diagram
Kairn system diagram screenshot
Timeline
Kairn timeline screenshot
FAQ
Kairn faq screenshot
Waitlist
Kairn waitlist screenshot

What's included

  • three.js hero
  • Statement
  • Product track
  • System diagram
  • Stats
  • Video
  • Timeline
  • Testimonials
  • FAQ
  • News
  • Waitlist

Getting started

  1. Install dependencies

    npm install

  2. Run the dev server

    npm run dev   # http://localhost:5177

  3. Build the static site

    npm run build   # writes the site to out/

Deploying

npm run build writes a static site to out/ for any static host.

License & credits

Photos and videos are from Pexels, shown in grayscale, and credited in the README. Replace the testimonial portraits with your own customers before launch.