Project

Motionforge

Edit motion on your live site, export code you own.

Motionforge is a dev-only, in-page motion editor for React and Next.js apps, shipped as a set of npm packages. You mount an overlay in development, tweak animations directly on your real running page, and it writes idiomatic CSS/TSX back into your repo, no runtime, nothing shipped to production.

Year:2026

Status:In development

Source:Private

Stack

Next.jsReact 19TypeScripttsupvitest

What I built

05 systems, built solo, the parts that mattered.

Write-back that doesn't pile up, the Next handler replaces a fenced block keyed by target selector, so re-saving the same element edits the rule in place instead of appending duplicates.
CSRF-to-RCE hardening on the code-writing endpoint, requires application/json and enforces Origin==Host so a malicious page can't drive the file writer, and refuses to run outside development.
Path-traversal-safe writes, the resolver rejects ../, absolute paths, and non-allowlisted extensions, keeping every write inside the project root.
Zero-friction wiring, it auto-detects the App Router entry, picks a canonical stylesheet, and idempotently inserts the one-time CSS import so exports take effect on refresh.
A real motion surface, reveal, hover, scroll, parallax, and stagger interactions with duration, easing, and cubic-bezier controls, keyframe generation, and prefers-reduced-motion handling.

Inside the build

Engram

View →

Project

Motionforge

Edit motion on your live site, export code you own.

Year:2026

Status:In development

Source:Private

Stack

Next.jsReact 19TypeScripttsupvitest

What I built

05 systems, built solo, the parts that mattered.

Write-back that doesn't pile up, the Next handler replaces a fenced block keyed by target selector, so re-saving the same element edits the rule in place instead of appending duplicates.
CSRF-to-RCE hardening on the code-writing endpoint, requires application/json and enforces Origin==Host so a malicious page can't drive the file writer, and refuses to run outside development.
Path-traversal-safe writes, the resolver rejects ../, absolute paths, and non-allowlisted extensions, keeping every write inside the project root.
Zero-friction wiring, it auto-detects the App Router entry, picks a canonical stylesheet, and idempotently inserts the one-time CSS import so exports take effect on refresh.
A real motion surface, reveal, hover, scroll, parallax, and stagger interactions with duration, easing, and cubic-bezier controls, keyframe generation, and prefers-reduced-motion handling.

Inside the build

Engram

View →

Motionforge

What I built

Write-back that doesn't pile up, the Next handler replaces a fenced block keyed by target selector, so re-saving the same element edits the rule in place instead of appending duplicates.

CSRF-to-RCE hardening on the code-writing endpoint, requires application/json and enforces Origin==Host so a malicious page can't drive the file writer, and refuses to run outside development.

Path-traversal-safe writes, the resolver rejects ../, absolute paths, and non-allowlisted extensions, keeping every write inside the project root.

Zero-friction wiring, it auto-detects the App Router entry, picks a canonical stylesheet, and idempotently inserts the one-time CSS import so exports take effect on refresh.

A real motion surface, reveal, hover, scroll, parallax, and stagger interactions with duration, easing, and cubic-bezier controls, keyframe generation, and prefers-reduced-motion handling.

Motionforge

What I built

Write-back that doesn't pile up, the Next handler replaces a fenced block keyed by target selector, so re-saving the same element edits the rule in place instead of appending duplicates.

CSRF-to-RCE hardening on the code-writing endpoint, requires application/json and enforces Origin==Host so a malicious page can't drive the file writer, and refuses to run outside development.

Path-traversal-safe writes, the resolver rejects ../, absolute paths, and non-allowlisted extensions, keeping every write inside the project root.

Zero-friction wiring, it auto-detects the App Router entry, picks a canonical stylesheet, and idempotently inserts the one-time CSS import so exports take effect on refresh.

A real motion surface, reveal, hover, scroll, parallax, and stagger interactions with duration, easing, and cubic-bezier controls, keyframe generation, and prefers-reduced-motion handling.