Omni Image Animation & AI Studio

1 Line-by-Line Pencil Sketch Animation

The pencil sketch engine converts a photograph into a sequenced graphite drawing that builds itself stroke by stroke, accurately simulating a human artist's hand. The algorithm runs in two phases:

Phase 1 - Stroke Generation: For every 4 * 4 pixel sample grid, the engine computes the Sobel gradient at that point (Gx = depth[x+1] - depth[x-1], Gy = depth[y+1] - depth[y-1]). The gradient direction is rotated 90deg to find the tangent to the nearest edge. This becomes the stroke angle - strokes drawn perpendicular to a gradient naturally follow the contour of shapes, exactly as a human hand would. Stroke length scales with darkness: length = 6 + (255 - luma) / 30, producing 6px gossamer lines in highlights and up to 14px heavy strokes in deep shadows. Pixels with luminance below 100 receive a secondary cross-hatch stroke at 90deg for tonal density. All strokes are radially sorted by distance from canvas centre for a natural outward drawing progression.

Phase 2 - Animation: Each animation frame calculates targetStrokeCount = floor(progress * totalStrokes). Only the delta between the last drawn index and the target is rendered per frame, batched into a single beginPath() / stroke() call on a composited off-screen layer. This accumulation technique prevents expensive full-redraws while maintaining 60 FPS on images with 50,000+ strokes.

2 2.5D Cinematic Parallax Camera Zoom

The parallax engine synthesises depth-of-field camera motion from a flat photograph without any depth sensor data. A Gaussian-weighted luminance analysis generates a synthetic depth map heuristic (brighter = closer in typical outdoor photos). The camera model applies a perspective-correct pixel remap at each frame:

• zoom = 1.0 + progress * 0.15 - 15% progressive zoom over the full timeline
• panX = sin(progress * 2pi) * 20px - sinusoidal horizontal drift
• Each pixel's source coordinate is computed as srcX = (x - w/2) / (zoom + (1 - depth) * 0.2) + w/2 + panX * depth

The depth multiplication on panX creates the parallax offset - shallow pixels (depth ~= 1.0) shift the full pan amount while deep background pixels (depth ~= 0.0) shift minimally, creating genuine 3D separation. The result is visually indistinguishable from a professional camera move with depth-of-field rack focus.

3 Ink-in-Water Fluid Assembly

The ink assembly engine simulates each non-white pixel as a physical particle obeying curl-noise turbulence physics, then assembles them into the image. Each particle starts at a random offset (up to 1/2 canvas width from its target) and carries its true image colour. The physics update per frame:

• First 10% of timeline: Pure curl noise turbulence - vx += sin(y * 0.05 + t * 10) * 5, creating vortex-like chaotic flow
• After 10%: Spring force activates - ax = (tx - x) * 0.05 pulls each particle toward its target position
• Damping: All velocities multiplied by 0.85 per frame to prevent oscillation and simulate fluid viscosity

The result is a simulation of ink dispersing in water (chaotic turbulence phase) then gradually reverse-assembling into a coherent image (spring convergence phase). The assembly time is controlled by the Timeline Duration slider.

4 Kintsugi Gold Fracture & Stitch

Kintsugi is the Japanese art of repairing broken pottery with gold lacquer. The engine generates a procedural fracture network over the photograph and animates the gold sealing process. The fracture algorithm uses recursive branching:

1. 4 seed points are placed randomly near the image centre (30-70% of dimensions)
2. Each branch travels 40-120px, sampling 5 intermediate jitter points (+/-15px off axis) to create organic crack irregularity
3. At each branch terminus, a 40% probability creates a sub-branch at a random angle - generating a fractal crack tree
4. Each fracture segment is assigned a phase value (0-1) based on its depth in the recursion tree
5. During animation, segments with phase <= progress are rendered - revealing cracks from primary veins to fine sub-cracks
6. Revealed segments are drawn in a gold gradient (strokeStyle = 'rgba(251,191,36,a)') with an outer glow via shadowBlur = 8

5 Interactive 3D Studio Relighting (Blinn-Phong)

The relighting engine implements the full Blinn-Phong illumination model entirely in JavaScript, running in real-time as you drag the light source. The model uses a synthetic surface normal map computed from the depth map. For each pixel:

• Normal map: N = normalize(cross([-1,0,ddepth/dx], [0,-1,ddepth/dy])) - the cross product of horizontal and vertical depth gradients gives a surface normal vector
• Diffuse: diff = max(0, N.L) where L is the normalised vector from pixel to light position
• Specular: spec = (N.H)^64 where H = normalize(L + V) is the halfway vector (shininess = 64)
• Attenuation: att = 1 / (1 + 0.00005 * |L|2) - quadratic light falloff
• Final: out_R = pixel_R * (0.25 + (diff * lR + spec) * att * 3.0)

The ambient term (0.25) prevents pure-black shadow regions. The light source position and colour are updated live via mouse drag on the canvas.

6 Anamorphic Lens Flare & Film Grain

The lens flare engine simulates the distinctive optical artefacts of anamorphic cinema lenses used in Hollywood productions. Three compositing layers are applied in sequence:

1. Hotspot extraction: All pixels with luminance > 200 are isolated into a separate buffer - these become the flare source points
2. Horizontal anamorphic streak: The hotspot buffer is tinted electric blue, stretched to 3 * canvas width, and blurred with filter:blur(10px). Composited using screen blend mode - the horizontal blue streak is the signature of a cylindrical anamorphic lens element
3. Circular bloom: An additional blur(20px) pass of the raw hotspots adds warm volumetric light scatter around each highlight
4. Film grain: Gaussian noise (+/-10 levels) is added to every pixel, simulating analog photographic grain from silver halide emulsion

7 E-Commerce Product Contact Shadow Studio

The shadow engine synthesises a professional two-component contact shadow beneath a product photograph, replicating the output of a studio light box setup. The dual-ellipse shadow model:

• Core contact shadow (tight, dark): A dark ellipse (rgba(0,0,0,0.6)) scaled to 25% of image width, with blur(8px), positioned at 85% of image height. This represents the zone of zero light penetration directly under the object
• Ambient occlusion shadow (wide, soft): A large ellipse (rgba(0,0,0,0.2)) scaled to 40% width, with blur(25px). This represents scattered light from the environment filling the edges of the shadow
• Canvas is vertically squashed (scaleY(0.25)) to flatten the shadow into a ground plane perspective

The product image is then composited over the shadow on a neutral studio grey background (#f4f4f5), matching the output of a professional product photography lightbox.

8 Fast-Marching Method AI Object Inpainter

The inpainter uses the Fast Marching Method (FMM) - a wavefront propagation algorithm from computational physics - to fill the region you paint with a red mask. FMM operates by maintaining a priority queue (min-heap) of pixels on the boundary of the mask region. Pixels are processed in order of their arrival time (analogous to wavefront propagation speed):

1. All non-masked pixels adjacent to the mask boundary are added to the heap with arrival time = 0
2. The pixel with smallest arrival time is extracted and used to fill its masked neighbours
3. Each filled pixel receives a weighted average of its known non-masked neighbours, weighted by their inverse distance
4. Newly filled pixels are re-added to the heap with arrival time = 1 + their distance from the original boundary
5. Process repeats until all masked pixels are filled

This propagation-from-boundary approach naturally extends textures and background patterns inward, producing coherent fills without seams or smearing artefacts that simple blur-fill methods produce.

9 33x3 Laplacian Convolution Sharpening

The convolution engine applies a discrete 33x3 kernel to every pixel in the image via direct spatial convolution. The default kernel is the Laplacian-based sharpening matrix:

[ -1  -1  -1 ]
[ -1  +9  -1 ]
[ -1  -1  -1 ]

For each pixel at position (x, y), the output value is the sum of the kernel weights multiplied by the corresponding source pixel values in the 33x3 neighbourhood. The centre weight (+9) amplifies the pixel itself while the surrounding -1 weights subtract the average of its neighbours - this is mathematically equivalent to adding the Laplacian (second derivative) of the image to the original, boosting high-frequency components (edges) without any server processing.

10 MediaPipe 468-Point 3D Face Mesh

The face mesh engine loads Google's MediaPipe Face Mesh WASM model via CDN and runs full face landmark detection entirely in the browser. The detection pipeline:

1. BlazeFace detector: A lightweight MobileNet-based model locates the face bounding box in the image
2. Face Mesh model: A 191K-parameter CNN processes the cropped face region and regresses 468 3D landmark coordinates in normalised screen space [0, 1]3
3. Landmark rendering: Each of the 468 points is plotted as a yellow dot, with the standard MediaPipe connection map used to draw edges between anatomically adjacent landmarks (eyelid contours, lip boundary, jawline, nose bridge, etc.)

The model runs with refineLandmarks: true, which activates the iris tracking sub-model that adds 10 additional iris contour points per eye - improving pupil and iris boundary accuracy for applications like gaze estimation and eye tracking.

* Full Engine Pipeline Comparison Table

~ Client-Side Architecture & Export Pipeline

All 10 engines run entirely within the browser's sandboxed JavaScript environment. When an image is uploaded, the FileReader API reads it into a local DataURL - no network request is made. The image is drawn to an off-screen canvas and its pixel data extracted into a Uint8ClampedArray buffer via getImageData(). All computation runs on this buffer.

The Export 60 FPS WebM button uses the canvas.captureStream(60) API to attach a real-time stream to the canvas, then pipes it through the browser's built-in MediaRecorder encoder with video/webm;codecs=vp9. Each animation frame rendered at 60 FPS is captured, compressed, and buffered. When the animation completes, the accumulated Blob is serialised to an ObjectURL and triggered as a file download - all without any server round-trip.

- - Explore More Tools