NENextjs Engine
Gen 3 mapStart hereWhy NEExecution modelInspect + debugDocumentationGet source
Notebook & chapters
Release History · live from GitHub
Pin a heading, or select text and use the floating pin to save your place.
View source ↗

Next.js Engine v2.6.0 — Shader, Motion, Scroll & Overlay

Release type: Feature release Previous release: v2.5.0 Recommended tag: Release-v2.6.0

Next.js Engine v2.6.0 is a major expansion of the v2 runtime. It introduces EngineShader, EngineTransitions+, and EngineOverlay as new first-class systems, turns EngineScroll into a much larger orchestration runtime, and substantially improves Canvas/SVG/3D rendering, styling, lazy loading, media behavior, diagnostics, and runtime performance.

The goal of this release is to make richer interfaces possible without forcing every application to rebuild shader, animation, scrolling, overlay, focus, rendering, and scheduling infrastructure by hand.

Highlights

  • ✨ EngineShader — compiled .shed GPU surfaces with runtime variables, stages, scheduling, caching, and hot reload.
  • 🎬 EngineTransitions+ — 20 configurable transition mechanics, shared-element morphing, programmatic transitions, and EngineNav integration.
  • 📜 EngineScroll orchestration — timelines, ranges, point tracking/groups, snapping, crossing events, CSS bindings, scrubbing, and the new Director.
  • 🪟 EngineOverlay — first-class dialog, drawer, and popover nodes with shared focus, Escape, stacking, portals, and positioning behavior.
  • 🎨 EngineCanvas / EngineSVG / Engine3D upgrades — demand-driven RAF behavior, retained rendering improvements, Shader mode, topology fixes, and better GPU cleanup.
  • ⚡ Runtime/performance work — scoped style collection, bounded resolver caching, pooled observers/listeners, lighter navigation, improved module splitting, and reduced idle work.
  • 🧪 Stronger CI — dedicated Shader, Transitions+, Scroll, Overlay, style, APIStatic, SSR, type-check, and production-build regression coverage.
  • 📚 Expanded official docs for every new visual/runtime system.

1. EngineShader — the new .shed graphics system

v2.6.0 introduces EngineShader (ESH), a compiled GPU-surface system designed for NE.

Shader source:

text
data/shader/public/**/*.shed

Generated runtime artifacts:

text
public/_static/shader/**/*.shed.dat
public/_static/shader/manifest.json

Application code uses logical shader names rather than generated hashes:

ts
{
	type: "card",
	props: {
		shader: "aurora",
	},
}

.shed language

.shed is a small graphics/data-flow language rather than raw CSS or raw GLSL:

shed
shader <= pixelAurora => [
	var <= speed => .55
	const <= pixelSize => 4

	render => [
		resolution => .25
		filter => nearest
	]

	before.aurora => [
		time <= system.time
		speed <= var.speed
		colors => [#071126 #5b21b6 #06b6d4]
	]

	after.pixel => [
		use => pixelate
		size <= const.pixelSize
	]
]

What EngineShader adds

  • Runtime var values that schema/JSX can override.
  • Compile-time const values.
  • Runtime inputs for time, delta, frame, pointer, scroll, and viewport data.
  • Four visual stages: before, render, after, and overlay.
  • Current effects including gradients, aurora, noise, pixelation, palette reduction, dithering, and lightweight glow/bloom.
  • Resolution scaling and linear / nearest filtering.
  • Dead-pass and unused-uniform elimination.
  • Automatic execution modes:
    • static — draw once, then idle;
    • event — redraw on relevant pointer/scroll/viewport changes;
    • animated — use the shared EngineShader RAF scheduler.
  • Shared animation scheduling instead of one permanent RAF per shader.
  • Manifest/artifact caching with stale-request race protection.
  • Development hot reload for changed shader artifacts.
  • Scheduler failure isolation so one bad shader callback cannot freeze the rest.

EngineCanvas Shader mode

tsx
<EngineCanvas
	shader={{
		src: "aurora",
		variables: {
			speed: .8,
			intensity: .65,
		},
	}}
	style={{ height: 420 }}
/>

When Shader mode is selected, EngineShader owns the surface instead of stacking a second canvas over a normal EngineCanvas renderer.

Read: ../engine-components/engineshader.md

2. EngineTransitions+ — 20 transition mechanics

The previous page-transition path has grown into EngineTransitions+, a first-class motion system for navigation, layout changes, and shared visual continuity.

Built-in transitions

text
fade       slide      zoom       morph      layout
reveal     wipe       split      curtain    pixel
dissolve   liquid     smear      depth      flip
page-turn  spring     scatter    rgb        portal

Simple usage:

ts
cprop: {
	link: {
		transition: "portal",
	},
}

Configurable usage:

ts
cprop: {
	link: {
		transition: {
			type: "portal",
			duration: 620,
			easing: "ease-out",
			origin: "pointer",
			config: {
				rotation: 8,
				blur: 5,
			},
		},
	},
}

Transition runtime additions

  • Shared-element morphing.
  • Layout transition support.
  • Programmatic run(), push(), and replace() APIs.
  • EngineNav and EngineLink integration.
  • Normal internal links remain lightweight next/link navigation.
  • Transition runtime is lazy-loaded only when animation is requested.
  • Modifier-click/native navigation behavior is preserved.
  • Reduced-motion preferences are respected.
  • Unsupported browsers fall back to ordinary navigation.
  • Active transitions can be interrupted.
  • Legacy names remain available as aliases.

Important aliases include:

text
page-to-page     → fade
scale            → zoom
shared-morph     → morph
flip-layout      → layout
pixel-dissolve   → pixel
noise-dissolve   → dissolve
liquid-warp      → liquid
motion-smear     → smear
depth-push       → depth
card-flip        → flip
elastic-spring   → spring
scatter-assemble → scatter
chromatic-shift  → rgb

Read: ../engine-components/enginetransitions.md

3. EngineScroll — advanced orchestration

EngineScroll existed before v2.6.0, but this release expands it far beyond basic movement.

The shared runtime now covers named points, programmatic movement, timelines, ranges, active-point tracking, point groups, snapping, CSS bindings, crossing events, and multi-track orchestration.

Improved navigation

ts
EngineScroll.move("#pricing", {
	align: "center",
	duration: 420,
	easing: "easeOutCubic",
});

EngineScroll.next({ duration: 280 });
EngineScroll.previous({ wrap: true });
EngineScroll.nearest();

Named point geometry supports start, center, end, and nearest alignment.

Timelines

ts
const timeline = EngineScroll.timeline({
	start: "#hero",
	end: "#features",
	source: "current",
	easing: "linear",
});

Timeline frames expose normalized/raw progress, range state, direction, and velocity. Timelines support segments, keyframes, scrubbing/seeking, subscriptions, crossing/activity events, and direct CSS bindings.

New Scroll building blocks

  • EngineScrollRange — reusable/cached boundary resolution.
  • EngineScrollPointTracker — active/nearest semantic point tracking.
  • Point groups — orchestrate related points together.
  • EngineScrollSnap — optional point snapping through the same runtime.
  • Crossing/activity events — react to thresholds and range state changes.

EngineScroll Director

The new Director coordinates many named timelines through one EngineScroll runtime subscription:

ts
const director = EngineScroll.direct({
	hero: {
		start: "#hero",
		end: "#features",
		source: "current",
	},
	features: {
		start: "#features",
		end: "#pricing",
		source: "current",
	},
});

Director supports aggregate frames, per-track subscriptions, progress-only subscriptions, events, CSS bindings, seeking, sampling, interpolation, invalidation, and automatic subscription cleanup.

Read:

4. EngineOverlay — Dialog, Drawer, and Popover

v2.6.0 adds a shared Overlay UI runtime with three first-class schema nodes:

text
dialog
drawer
popover

React exports:

text
EngineDialog
EngineDrawer
EnginePopover

Dialog

ts
{
	type: "dialog",
	props: {
		triggerLabel: "Delete project",
		title: "Delete project?",
		description: "This cannot be undone.",
		actions: [
			{ label: "Cancel" },
			{ label: "Delete", variant: "danger", onClick: "deleteProject" },
		],
	},
}

Drawer

Supports left/right/top/bottom placement and configurable sizing.

Popover

Supports anchored placement, start/center/end alignment, viewport collision handling, automatic flipping, clamping, outside-click dismissal, and optional trigger-width matching.

Shared Overlay runtime

All three share:

  • overlay stack management;
  • top-overlay Escape ownership;
  • focus discovery/trapping;
  • initial focus and focus restoration;
  • reference-counted body scroll locking;
  • React portals;
  • nested-overlay safety;
  • backdrop dismissal rules;
  • popover collision positioning;
  • reduced-motion-aware transitions.

Overlay components are lazy registry split-points, so pages that never use Overlay do not eagerly load the component set.

Read: ../engine-components/engineoverlay.md

5. EngineCanvas, EngineSVG, and Engine3D

EngineCanvas

EngineCanvas now clearly supports three paths:

text
callback mode
EC graphics mode
EngineShader mode

Callback rendering is demand-driven:

text
no onDraw             → no callback RAF
onDraw returns true   → continue
onDraw returns false  → stop until a redraw is needed

Other improvements include adaptive DPR rate limiting, offscreen/hidden-tab pauses, dynamically loaded graphics backends, resize redraw behavior, and cleaner rendering ownership.

EngineSVG

EngineSVG is now a retained ECScene renderer with:

  • retained DOM nodes;
  • transform/material updates without unnecessary geometry rebuilds;
  • strip, fan, and triangles topology;
  • indexed triangle support;
  • boundary-only outline behavior;
  • SVG import/export support.

Engine3D

Engine3D improves retained Three.js topology swaps/resource reuse and more carefully disposes removed geometry/material GPU resources.

Read:

6. Runtime and performance improvements

v2.6.0 includes a broad performance/correctness pass focused on doing less work when nothing changed.

  • Scoped StyleCollector ownership — normal generated CSS is owned by the current EngineProvider instead of relying on a process-wide render collector.
  • Nested at-rule fixes — @media, @supports, @keyframes, @font-face, @page, and @property serialize using their correct grammar.
  • Bounded responsive cache — deterministic responsive resolution uses a 2,048-entry LRU-style cache instead of render-time cache clearing or unbounded growth.
  • Shared breakpoint listener — breakpoint hooks share one passive resize listener/coalesced RAF and only update when the resolved breakpoint changes.
  • Pooled IntersectionObservers — compatible in-view consumers share native observers.
  • Stable provider defaults — empty handler/slot maps no longer allocate fresh objects on every provider render.
  • Better module splitting — small primitives stay eager while heavier optional systems are loaded only when needed.
  • Navigation optimization — ordinary internal links stay on next/link; animated links opt into Transitions+ lazily.
  • Media improvements — less duplicate image/video work, better size reservation/readiness behavior, and improved poster/preload handling.
  • Hero parallax — RAF-throttled, viewport-aware, and reduced-motion-aware.

Read: ../runtime-performance.md

7. API, schema, and validation hardening

EngineAPI / APIStatic

  • Endpoint descriptors are atomic during override merging, preventing route/operation leakage.
  • Explicit falsy APIStatic input (null, false, 0, "") remains real input rather than being replaced by compatibility fallback data.
  • Explicit EngineAPI config directories have isolated cache identities.
  • Concurrent loads for one config directory share a promise.
  • .api sources are read concurrently while deterministic merge order is preserved.
  • APIStatic binding validation is scope-aware, allowing normal local names such as response while still rejecting true generated-runtime collisions.

Schema/runtime typing

  • EngineShader surfaces have proper schema types.
  • EngineScroll point metadata has dedicated schema typing.
  • dialog, drawer, and popover are official built-in node types.
  • SchemaRenderer integrates newer split-module, point, shader, and lazy behavior.
  • Schema validation/analyzer recursion and traversal are hardened.
  • Mobile schema patching avoids unnecessary repeated work.

8. CI and regression coverage

The Engine CI now includes dedicated checks for:

  • APIStatic compiler/runtime;
  • EngineShader compiler/runtime/local generation;
  • EngineBrowser SSR safety;
  • EngineTransitions+ presets;
  • EngineScroll core/progress/orchestration;
  • EngineOverlay runtime;
  • style compiler isolation and at-rules;
  • TypeScript;
  • optimized Next.js integration build;
  • production client chunk reporting.

The main → main-empty synchronization workflow was also strengthened.

9. Documentation

New or substantially expanded official guides include:

  • EngineShader
  • EngineTransitions+
  • EngineOverlay
  • EngineSVG
  • Engine3D
  • EngineScroll Timeline / Range / Tracker / Director / Groups
  • EngineVideo
  • CustomSelect
  • runtime/performance notes
  • styling and schema diagnostics

The docs now explicitly separate the responsibilities of Transitions+, Scroll, Canvas/SVG, and Shader rather than presenting them as one animation system.

Compatibility and migration notes

v2.6.0 is intended as an additive v2 feature release, not a deliberate compatibility-breaking v3 rewrite.

  • page-to-page remains supported and maps to the new fade transition.
  • instant navigation remains available.
  • Longer development transition names remain available as aliases.
  • Existing EngineCanvas callback and retained graphics modes remain available alongside Shader mode.
  • EngineScroll keeps legacy movement forms while adding the newer options/orchestration APIs.
  • Overlay is additive.
  • Shader is opt-in and does not initialize a GPU surface when unused.

Applications with custom low-level Canvas, Scroll, or style integrations should still test against v2.6.0 before production deployment.

Current boundaries

The following planned ideas are not being advertised as completed v2.6.0 features:

  • the future whole-page styles.shed / Minecraft-shader-like DOM compositor;
  • whole-page EngineShader framebuffer versions of the pixel, liquid, and dissolve transitions;
  • arbitrary DOM/3D post-processing through EngineCanvas Shader mode;
  • full color/depth/normal/velocity/history framebuffer composition;
  • the reserved Skia/CanvasKit backend.

Current Transitions+ effects such as pixel, liquid, and dissolve animate native View Transition snapshots. Current .shed programs operate on supported Engine-owned GPU surfaces.

  • Documentation index: ../index.md
  • v2.5.0 release notes: ./NE-v2-5-0.md
  • Full compare after the v2.6.0 tag exists:
    https://github.com/Kate-alt-69/nextjs-engine/compare/Release-v2.5.0...Release-v2.6.0

Maintainer publishing checklist

  • Set the workspace/package version to 2.6.0.
  • Confirm the final Engine runtime CI run is green.
  • Confirm main-empty contains the distributable package state.
  • Create/tag the release as Release-v2.6.0.
  • Attach package/source ZIP assets if distributed the same way as v2.5.0.
  • Use this document as the GitHub Release body.
  • Verify the v2.5.0...v2.6.0 compare link after the tag exists.

We use cookies to make your experience better.

Optional cookies currently only power the docs notebook, so pinned sections and selected text can be here when you come back.

Next.js Engine v2.6.0 — Shader, Motion, Scroll & Overlay | Kastrick