Owl Pro

Introducing

Owl Pro

Nocturnal by design. Silent by default.

Scroll ↓

Ninety-six frames.

One request.

No decoder. No seeking.

Just a canvas and a number.

Every frame, exactly where you left it.

Staged

Every word gets its own slice.

Six words, six data-scroll-range windows, one section. The stagger is the attribute.

Sees in the dark.

A scroll engine that pins, stages and releases — so a scene takes exactly as long as it needs.

0→1

Progress, every section, always

1

Sticky window, one host element

0 kB

JavaScript you have to write

Vector, scrubbed.

A Lottie timeline mapped straight onto pin progress.

Machined

Turn it over.

Lit by where you are.

A glTF model, framed entirely by how far you have scrolled. Four camera waypoints, no code.

Rigged

Scroll is the timeline.

One named clip, scrubbed frame-by-frame by pin progress — <tosi-scroll-animation name="ClimbLedge">. The model streams from cdn.tosijs.net; this repo ships none of it.

The whole story

Written in Markdown. Not in JavaScript.

Every scene here is an element with attributes. Read the source — it is the page.

Pin, then exit

<tosi-product-section scroll="620"> holds a scene for 6.2 screens, then lets it go.

Stage the reveal

data-scroll-range="0.4,0.57" gives an animator its own slice of the section.

Interpolate anything

<tosi-waypoint> blends the CSS you write — numbers per-number, colours through color-mix().

Designed on a coastline.

Nine thousand kilometres.

Built somewhere colder.

Owl Pro

Available now, as a <script> tag.

tosijs-product