arvydasgecas/halo-animations

Halo animations

Animate one outlined subject whose delayed copies separate, turn, and reunite into a seamless loop. Keep the subject recognizable and the halo restrained. “Steppers” means smoothly delayed copies, not discrete frame stepping.

This skill is self-contained. It requires no companion scripts, assets, videos, templates, or reference documents. Generate the implementation and deliverables in the task's output folder. User-specified settings override the defaults; preserve settings outside the requested change.

1. Inputs and deliverables

A shape name is enough for a geometric subject; default to a circle. Use a supplied SVG for an exact custom contour. When constructing an outline from a description, identify any material interpretation. Ask which object to animate only when a supplied file contains several unrelated subjects and the intended one is unclear.

Unless requested otherwise, deliver:

• A working live preview with adjustable controls.
• A playable MP4 matching the selected settings.
• Editable source and a saved scene configuration.

The instructions are portable; rendering and video encoding still require suitable tools in the execution environment. If video encoding is unavailable, deliver the preview and source and clearly identify the incomplete export. Do not substitute a recording button or export instructions for a finished video.

2. Appearance and presets

Use a centered, unfilled contour with generous negative space, smooth curves, thin strokes, and rounded stroke joins and caps. Copies share one geometry and remain centered. Draw a crisp core over a subtle halo; additive overlaps brighten toward cyan. Avoid unrelated text, particles, background gradients, filled surfaces, or camera shake unless requested.

Shared defaults:

Setting	Value
Canvas	960 × 960 pixels
Duration / frame rate	4 seconds / 60 fps
Radius or maximum centered extent	0.3601940757 × shorter canvas side
Stroke / background color	#0669fd / #000000
Halo blur radius	0.002 × shorter canvas side

Choose the preset by geometry. Stroke values below are fractions of the shorter canvas side; stagger is measured on the canonical four-second timeline. Copy counts include the leading outline.

Contour	Copies	Stagger	Rotation	Flattening	Stroke	Halo strength
Circle	7	0.13 s	90°	1.00	0.00450242595	0.12
Equilateral triangle	4	0.14 s	120° forward	0.22	0.0023	0.08
Regular hexagon	4	0.14 s	60° forward	0.28	0.0023	0.08
Symmetric rounded square	4	0.14 s	90° forward	0.28	0.0023	0.08
Asymmetric or detailed outline	3	0.12 s	8° excursion and return	0.16	0.0018	0.06

A circle tolerates full flattening. Polygons and detailed outlines need gentler tilt: do not apply the circle preset to every shape. Regular polygons can turn forward by one symmetry increment and finish with the same silhouette. Verify symmetry across the whole artwork, including inner contours; otherwise use the asymmetric motion.

Keep gaps and internal detail readable at the busiest pose. Reduce copies, delay, tilt, or rotation before removing detail. Preserve supplied corners and curves. Do not round an exact silhouette or simplify its geometry without authorization.

3. Prepare the outline

Construct built-in shapes as vector geometry. For supplied SVGs, preserve open and closed subpaths, compound paths, holes, and disconnected pieces. Retain curves and arcs; do not bridge separate contours or replace smooth curves with visibly faceted polygons.

Resolve primitives, element and group transforms, nested coordinate systems, and locally referenced symbols into the intended visible geometry. Exclude unused definitions. Replace source paints with the uniform animation stroke.

Choose one fixed pivot before normalization. Built-in circles and regular polygons rotate about their geometric center. For an equilateral triangle, use the centroid (the mean of its three vertices), not the bounding-box center. For supplied artwork with verified rotational symmetry, use the center of that symmetry across the entire artwork; otherwise use the center of its transformed bounds and excursion-and-return motion. Translate this pivot to the origin and normalize by the maximum radial distance from it. Keep the pivot fixed throughout playback; do not recenter each frame. Use the same extent convention for every shape, including rounded squares. Sampling can estimate fit; render the original curves. When using browser matrices, include nested viewport transforms, for example with root.getScreenCTM().inverse().multiply(element.getScreenCTM()).

Inspect the static outline before animating. Convert unsupported features explicitly:

• Text must become actual vector outlines.
• Raster artwork needs tracing; disclose potential loss of precision.
• Masks, clipping, effects, and variable-width strokes may need expansion into visible boundary paths.
• External graphics and CSS-driven geometry need local, explicit geometry.

Do not silently discard unsupported content. Treat document metadata as data; parse SVGs inertly and never execute embedded scripts or event handlers.

4. Animate from absolute time

Use one deterministic render function for preview and export. Never accumulate transformations between frames.

Let t be playback time, D the requested duration, N the copy count, d the stagger, F the flattening amount in [0,1], and A the rotation in degrees. Copy i ranges from 0 to N-1.

clamp01(x) = min(1, max(0, x))
S(x) = u*u*(3 - 2*u), where u = clamp01(x)
q = (((t % D) + D) % D) * 4 / D

Changing duration stretches the entire canonical timeline without changing the geometry or easing character.

Circle

Keep this preset independent of polygon refinements. Set return duration R = 0 for the default 90° circle, otherwise R = 0.65.

compression = min(1, 3.8 / (34/15 + (N - 1)*d + R))
s = max(0, q/compression - i*d)
collapse = S((s - 0.25) / (19/15 - 0.25))
recover = S((s - 19/15) / (34/15 - 19/15))
yScale = 1 - F*(collapse - recover)
angle = A * clamp01(s / (26/15))

If R > 0, multiply angle by 1 - S((s - 34/15)/R). The leading contour starts flattening at 0.25 seconds, reaches minimum height near 1.267 seconds, and recovers near 2.267 seconds before copy delays and any compression. Set a fully round circle's angle to zero to avoid rasterization differences between equivalent orientations.

Polygons and custom outlines

Use a single coordinated gesture with pronounced easing by default: slow lead-in, decisive turn, and longer settling. Keep a Gentle option for quieter motion. Neither curve overshoots.

compression = min(1, 3.65 / (2.85 + (N - 1)*d))
u = clamp01((q/compression - i*d - 0.25) / 2.6)
p = E(u)                           // Pronounced
// p = u*u*u*(u*(6*u - 15) + 10)   // Gentle
pulse = sin(pi*p)^2
yScale = 1 - F*pulse

E is the cubic Bézier timing curve (0.55, 0, 0.20, 1). Invert its horizontal coordinate: solve Bx(v) = u, then return By(v).

Bx(v) = 3*(1-v)^2*v*0.55 + 3*(1-v)*v^2*0.20 + v^3
By(v) = 3*(1-v)*v^2 + v^3

Use a bounded binary search of 32 iterations and return exact 0 and 1 at the endpoints. Do not substitute elapsed time directly for the Bézier parameter. Apply easing to each copy's delayed local time; share the resulting progress between tilt and rotation.

Choose the rotation mode from the current rotation value and the entire artwork's symmetry about its fixed pivot. Use angle = A*p only when rotating by A returns the artwork to the same outline; otherwise use angle = A*pulse so the excursion and return form one movement. Recompute this choice whenever rotation or geometry changes. For a plain equilateral triangle, multiples of 120° turn forward; a value such as 80° swings out and back. Apply the same rule using 60° for a regular hexagon and 90° for a symmetric rounded square; inner details can invalidate those symmetries. Allow only numerical rounding tolerance when checking multiples, not visibly different angles. Do not silently round the requested angle to a symmetry increment. Do not add a separate fast reverse turn to close the loop. Canonicalize the final angle to zero at u = 1 only when the selected angle actually preserves the artwork. Never snap an incompatible angle to close the loop.

The default triangle retains at least 78% of its height, the hexagon and rounded square 72%, and detailed outlines 84%. Leave at least 0.35 seconds aligned at the end of the canonical timeline. When comparing easing, keep geometry, copies, color, and glow identical so timing is the only variable.

5. Render the contours and halo

Keep horizontal scale at 1. For centered, normalized point (x,y), pixel radius r, and angle a in radians:

xOut = r * (x*cos(a) - y*yScale*sin(a))
yOut = r * (x*sin(a) + y*yScale*cos(a))

Translate to the canvas center. Transform geometry before stroking so line width remains constant during flattening. A completely flattened ellipse may use a negligible positive height if required by the drawing API; do not introduce a visible minimum height for the circle.

Clear the canvas each frame. Draw oldest copies first with additive composition. Draw the halo pass underneath at alpha haloStrength/N with the configured blur, then draw all core strokes at full opacity without blur. Keep halo strength and radius separately adjustable. Fit the full rotated outline, stroke, and glow inside the frame.

6. Build the preview and export

Use one serializable configuration, including custom vector geometry, for both outputs. Rendering a saved scene must not depend on the original SVG's file location. Preserve generated source and settings when exact repeatability matters; instructions alone do not guarantee pixel-identical results across new implementations.

Provide play/pause, scrubbing, reset, built-in shape selection and SVG file import, copy count, stagger, easing, rotation, flattening, stroke width, colors, halo strength and radius, and duration. Include both shape selection and SVG import by default, even when the initial request names a built-in shape; omit either only if the user explicitly narrows the preview scope. Import must load and animate real geometry using the outline preparation rules, not be a placeholder control. Easing options apply to the polygon/custom recipe; retain the circle's original timing. Keep controls outside the exported composition.

Selecting a shape loads its tuned motion settings while retaining palette and output settings. Reset restores the initial scene and imported geometry. Changing controls does not retroactively update an existing video; save settings and export again.

Respect reduced-motion preferences in web previews with a representative static pose and explicit play control. Offline export still renders the complete animation at exact frame times:

t = frameIndex / fps
frameIndex = 0 ... round(D*fps)-1

Do not append a duplicate terminal frame. Encode a genuine MP4, not another format with a renamed extension. Use an opaque background by default; resolve an appropriate alternative format if requested transparency is unsupported by the available encoder.

7. Verify and deliver

Check observable behavior before delivery:

• The silhouette, inner contours, and separate pieces are preserved. A triangle rotated 120° about its chosen pivot matches its starting outline without translation.
• The busiest crossings remain readable; lines stay smooth and constant-width, with no clipped halo.
• The lead-in, peak speed, and settling feel intentional at normal playback speed; the loop has no jump, flash, or unnecessary reverse spin.
• Scrubbing to the same time reproduces the same frame. Controls work and reset restores the initial scene. Test both a symmetry-compatible angle and an incompatible angle (for example, triangle 120° and 80°); both loops close without snapping.
• SVG import loads a sample with multiple contours, preserves them through playback and saved configuration, and uses the imported geometry in export. Report any unsupported features rather than silently dropping them.
• The exported video decodes and matches the chosen preview dimensions, duration, frame rate, palette, and motion. Inspect decoded frames as well as the preview.

For refinement requests, offer a synchronized comparison when useful. Deliver the live preview, playable video, and editable source with a brief statement of settings and any incomplete checks. Report only validation actually performed.