Morph Slider

A draggable scene carousel with four original Canvas2D morph transitions.

New

Tidal survey

Four field frames from a morning shoreline transect.

Preparing the scene sequence.

North reef at low tide

Slide 1 of 4: North reef at low tide

Transition

Each mode changes the scene geometry, not just its opacity.

Drag horizontally, or focus the scene and use the arrow keys. Indicators move one step toward the selected direction.

Implementation

1"use client";2 3import {4  useEffect,5  useRef,6  useState,7  type CSSProperties,8  type HTMLAttributes,9  type KeyboardEvent,10  type PointerEvent as ReactPointerEvent,11} from "react";12import { useReducedMotion } from "@/lib/media";13import {14  advanceMorph,15  beginMorphDrag,16  cancelMorphDrag,17  createMorphFrame,18  createMorphState,19  drawMorphFrame,20  indicatorMorphDirection,21  releaseMorphDrag,22  requestMorphStep,23  updateMorphDrag,24  type MorphChannelSources,25  type MorphDirection,26  type MorphEngineState,27  type MorphTransition,28} from "./morphSliderEngine";