← Back to logo proposalsnezam.ai · home motion

Home background — motion studies

Just the moving shape — one ink colour, no fills, no mock content. All loop continuously and slowly (4–90s), pure CSS/SVG, and stop under prefers-reduced-motion. On the real home they sit at ~10–15% opacity behind the text. 17–26 are the animated-line family in the style of hololaltawasul.com.

01
Constellation
Nodes and links slowly drifting; a few points twinkle.
CustomPainter · offset by controller
02
Flow lines
Contour waves sliding sideways, forever.
one wave Path, tiled + translated
03
Grid drift
Hairline grid scrolling diagonally.
CustomPainter grid, animated offset
04
Perspective floor
A grid on the floor, running toward you.
Matrix4 rotationX + scrolling paint
05
Isometric
A diamond lattice shifting.
two skewed grid layers, animated offset
06
Dot matrix ripple
A dot field with a slow ripple passing through.
dot grid + expanding radial mask
07
Contour breathing
Nested rings gently swelling and turning.
scale + rotate the whole path group
08
Pulse rings
Rings expanding from two points, staggered.
AnimatedBuilder · circle scale + fade
09
Orbits
Points tracing ellipses at different speeds.
offset-path ellipse / rotating layer
10
Sine waves
Two waves drifting and gently rising/falling.
phase + amplitude from the controller
11
Hatch drift
45° hairlines creeping across.
repeating stripe, animated offset
12
Marching traces
Dashed circuit paths with the dashes flowing.
stroke-dashoffset from the controller
13
Radar sweep
A soft wedge rotating over faint rings.
SweepGradient rotated by the controller
14
Equaliser
Faint bars breathing at their own pace.
N bars, staggered scaleY tweens
15
Ribbons
Long curved strands sliding at three speeds.
3 Paths, independent translate loops
16
Breathing polygon
Two hexagons slowly counter-rotating and scaling.
rotate + scale two Path outlines
17
Data streams
Fixed diagonal tracks with a bright pulse running along each — the animated-line look on hololaltawasul.com.
stroke-dashoffset per line, staggered
18
Plexus
A small mesh drifting; each link fades in and out on its own beat.
link opacity = f(controller, index)
19
Flow field
Short strokes gliding along invisible current lines.
offset-path per particle, looped
20
Topographic
Stacked contour rings, each swelling and turning at its own rate.
scale + rotate per contour layer
21
Moiré
Two fine rulings, one turning — interference bands crawl through.
two line layers, one slow rotation
22
Morphing blob
A soft outline stretching and easing back, never the same twice.
non-uniform scale + rotate on the Path
23
Scanning beam
A soft vertical sweep passing over a faint column grid.
gradient rect, x driven by controller
24
Node graph
An orthogonal graph panning slowly while the edges flow.
pan transform + stroke-dashoffset edges
25
Meteor streaks
Thin diagonal trails that shoot across and reset, staggered.
translate + fade, random delay per trail
26
Circuit pulse
A lit node travelling each trace like current on a board.
offset-path along the trace Path
Every one runs non-stop. On the home page use one at 10–15% opacity, masked to fade near the composer. My pick for “technology” without noise: 01 Constellation, 04 Perspective floor, 15 Ribbons, or 17 Data streams (the hololaltawasul.com line-flow look). Mockups only.