Orive — Interactive Site with

Orive — Interactive Site with a Custom Particle Engine Orive is a self-initiated concept site for a fictional decision-intelligence company. I used it to build the kind of motion-led marketing site that normally ships on a heavy stack — and to build it with no framework, no build step, and no WebGL. Six pages, roughly 2,000 lines of hand-written code, deployed static.

The centrepiece: a particle engine written from scratch

A fixed field of 2,800 particles sits behind every page and reacts to scroll position. It morphs between eight formations — a loose cloud, a snapped dot lattice, a tilted ring, a dense core, meridian rings, a hollow shell, concentric circles and a small ember — with each particle carrying its own delay so the shapes assemble organically instead of snapping.

Two decisions made it interesting:

Canvas2D, not WebGL. The target machine had no working WebGL, so the whole thing runs on the 2D context. To keep it smooth I project the 3D points by hand, sort particles into eight colour buckets per frame, and draw each bucket as a single batched path — rather than thousands of individual draw calls.

Choreography lives in the HTML. Each section declares its own motion with one attribute: data-shape="lattice:1.2:2.35" — shape name, where it forms, how long it holds, in viewport units. Adding a section to the site means adding one attribute, not editing the engine.

A theme that changes as you read

Sections can declare data-theme="light". Whichever section sits under the centre of the viewport wins, and the entire page — background, type, cards, borders and even the particle colour ramp — transitions between a near-black palette and a warm sand one. The particle field cross-fades its own background and colours in the same motion, so the switch reads as one continuous move rather than two things changing at once.

Interaction detail

Sticky statement sections that pin while the copy holds, with a line of text that cycles through six phrases as you scroll past.

A scattered accordion — cards positioned freely across the canvas that expand in place over the live particle field.

A stacked testimonial carousel where the top card lifts away and the incoming quote lights up word by word.

Images that resolve from coarse pixels into focus when they enter view, drawn through an offscreen canvas.

Reading highlight: long-form copy fills with colour word by word as it passes the top of the screen.

Custom dropdown menu whose dot-grid icon rearranges into a close glyph.

Buttons that fill from the bottom with a sliding double-arrow.

Smooth scrolling (Lenis), cursor-tracking glows, staggered card reveals and layered parallax throughout.

Built to be handed over

Fluid 16-column grid. Every width, gutter and type size is a clamp() expression, so the layout scales continuously between mobile and 1440px+ instead of jumping at breakpoints.

One content file. Every image and video slot is a single entry in content.js, with a per-slot colour grade. Swapping the art direction means editing one object, not hunting through markup.

Shared chrome. Header, navigation and footer are injected from one script, so six pages stay in sync.

Graceful fallbacks. Slots render generated Canvas2D artwork when no photograph is supplied, and prefers-reduced-motion is respected throughout.

Verification

I checked the build by driving headless Chrome: screenshotting every page at fixed scroll positions, measuring computed layout values against the design targets, and asserting zero console errors on all six pages, locally and again on the live deployment.

STACK / SKILLS (tags)

HTML5 CSS3 JavaScript (ES6) Canvas 2D Creative Coding Scroll Animation Lenis Responsive Design Design Engineering Motion Design Art Direction Vercel Accessibility Performance