Northframe Motion House

An editorial production-studio concept shaped around cinematic pacing, monochrome contrast, a reel-first hero, and scroll-linked storytelling.

Next.js

TypeScript

Editorial UI

Motion Systems

Reference Study

The experience started as a teardown of a cinematic studio site with dense motion, split service lanes, and a strong showreel hierarchy.

Adapted Direction

Instead of reproducing the original brand, the remake translates that grammar into a new art direction: warm monochrome surfaces, editorial typography, a custom loader, and interaction-led section framing.

Interactive Layer

The page combines a timed intro, hover-aware cursor, scroll progress rail, topic switching, and a reel modal to preserve the same sense of momentum without copying proprietary assets.

Original production house concept

Frame stories into myth.

This portfolio remake translates the reference site's showreel-first hierarchy, split service lanes, and editorial pacing into a new studio identity for weddings, live culture, and branded cinema.

Sections

Showreel

02:18

Output

Studio study

showreel / 24 fpscaptured across 9 cities

monochrome gradeeditorial cut

Northframe / reel module / case study

The reel leads. The copy follows.

Transition logic

Each module is framed like a sequence change, not a brochure block.

Visual tone

Warm paper whites, hard blacks, and a single ember accent.

weddingslive sessionsbrand storiescolor finishingsound bedsteaserseditorial pacingshowreelsweddingslive sessionsbrand storiescolor finishingsound bedsteaserseditorial pacingshowreels

Two lanes, one system

The reference site split its narrative by service type. This remake keeps that structure, but sharpens the offer.

Ceremony Direction

Weddings

A live-event lane designed around intimacy, timing, and editorial restraint. Shot lists are built to protect real emotion first and coverage second.

Shotlisted vows

Same-day teaser logic

Audio-first edits

Delivery logic

18h from final kiss to first cut

Culture and Campaign

Production

A parallel lane for launch films, venue stories, and live session captures. The visual language stays unified while pacing shifts to fit the brief.

Showreel-friendly modules

Location-led pacing

Color as narrative

Delivery logic

3 output formats from one shoot day

What survived the teardown

One site. Many rhythms.

The strongest idea in the source build was not a single effect. It was pacing.

This concept turns that pacing into a reusable portfolio item. The page moves from loader to reel, then into service lanes, then into notes and delivery logic. That structure is what made the original memorable, so that structure is what got preserved.

Loader

Short, precise, and tuned like an opening slate.

Cursor

Used as a directional cue on high-intent surfaces.

Sections

Each block behaves like a scene change rather than a card stack.

Portfolio note

This is an original art-direction study built from the interaction patterns of the source site, not a branded duplicate.

Topics module

Small interaction, real momentum.

Active note

Blocking a ceremony so the edit already has rhythm.

Field Note 01

The reference build used motion to make every section feel rehearsed. This remake keeps that idea, but translates it into production logic: pre-assign cutaways, map the vow arc, and reserve one operator for audience breathers.

Lens swaps timed to the music bed

Aisle and audience safety frames

Backup beats for unpredictable pacing

Reel architecture

A preview surface built like a sequence timeline.

00:01

00:02

00:03

00:04

00:05

Delivery stack

Hero reel surface with modal playback state

Scroll rail that tracks narrative progress

Topic switcher that swaps editorial notes in place

Custom cursor used only on deliberate interactive targets

Project note

A portfolio-safe remake of a kinetic studio experience.

The final result keeps the source site's strongest ideas intact: dense atmosphere, reel-first storytelling, split service lanes, and motion as structure. What changes is the brand, the copy, the palette balance, and the implementation details.

Northframe Motion House

An editorial production-studio concept shaped around cinematic pacing, monochrome contrast, a reel-first hero, and scroll-linked storytelling.

Next.js

TypeScript

Editorial UI

Motion Systems

Reference Study

The experience started as a teardown of a cinematic studio site with dense motion, split service lanes, and a strong showreel hierarchy.

Adapted Direction

Interactive Layer

The page combines a timed intro, hover-aware cursor, scroll progress rail, topic switching, and a reel modal to preserve the same sense of momentum without copying proprietary assets.

Original production house concept

Frame stories into myth.

This portfolio remake translates the reference site's showreel-first hierarchy, split service lanes, and editorial pacing into a new studio identity for weddings, live culture, and branded cinema.

Sections

Showreel

02:18

Output

Studio study

showreel / 24 fpscaptured across 9 cities

monochrome gradeeditorial cut

Northframe / reel module / case study

The reel leads. The copy follows.

Transition logic

Each module is framed like a sequence change, not a brochure block.

Visual tone

Warm paper whites, hard blacks, and a single ember accent.

weddingslive sessionsbrand storiescolor finishingsound bedsteaserseditorial pacingshowreelsweddingslive sessionsbrand storiescolor finishingsound bedsteaserseditorial pacingshowreels

Two lanes, one system

The reference site split its narrative by service type. This remake keeps that structure, but sharpens the offer.

Ceremony Direction

Weddings

A live-event lane designed around intimacy, timing, and editorial restraint. Shot lists are built to protect real emotion first and coverage second.

Shotlisted vows

Same-day teaser logic

Audio-first edits

Delivery logic

18h from final kiss to first cut

Culture and Campaign

Production

A parallel lane for launch films, venue stories, and live session captures. The visual language stays unified while pacing shifts to fit the brief.

Showreel-friendly modules

Location-led pacing

Color as narrative

Delivery logic

3 output formats from one shoot day

What survived the teardown

One site. Many rhythms.

The strongest idea in the source build was not a single effect. It was pacing.

Loader

Short, precise, and tuned like an opening slate.

Cursor

Used as a directional cue on high-intent surfaces.

Sections

Each block behaves like a scene change rather than a card stack.

Portfolio note

This is an original art-direction study built from the interaction patterns of the source site, not a branded duplicate.

Topics module

Small interaction, real momentum.

Active note

Blocking a ceremony so the edit already has rhythm.

Field Note 01

Lens swaps timed to the music bed

Aisle and audience safety frames

Backup beats for unpredictable pacing

Reel architecture

A preview surface built like a sequence timeline.

00:01

00:02

00:03

00:04

00:05

Delivery stack

Hero reel surface with modal playback state

Scroll rail that tracks narrative progress

Topic switcher that swaps editorial notes in place

Custom cursor used only on deliberate interactive targets

Project note