3D Loop Gradient Generator

A 3D loop gradient is a specific variant of the 3D gradient mode designed for video export. The visual output is identical to the regular 3D mode: sculpted wave surfaces with lighting, depth, and colour flowing across the geometry. The difference is in the motion: every parameter that animates over time is constrained to return to its starting value exactly at the loops end, so the exported video can play continuously without a visible jump cut.

This matters for any context where a video plays repeatedly in front of viewers: signage video walls in retail and corporate offices, looped product backgrounds on e-commerce pages, music video backplates on Spotify Canvas and Apple Music, live-stream backgrounds, conference stage backdrops. In all of these cases, a visible loop point breaks the illusion that the visual is genuine ongoing motion. The seamless loop guarantee removes that problem.

The studios 3D Loop renderer uses the same WebGL shader as the regular 3D mode, with one addition: the underlying time variables are constrained to periodic functions whose period matches the loop duration. The result is mathematically guaranteed to loop, not just visually-close-to-looping.

The two modes are nearly identical from a user perspective. The visible differences:

Pick 3D Loop whenever the output is going to be exported as video. Pick the regular 3D mode when the output is going to be embedded live (React component) or used as a still image.

1. Open the 3D loop editor. Visit the free 3D loop gradient generator. The canvas opens with a default looping wave running.
2. Set loop duration. Pick 3 to 60 seconds. Shorter loops feel more obvious; longer loops feel like organic continuous motion. 10 to 20 seconds is the sweet spot for social media.
3. Sculpt the surface and palette. Same controls as the regular 3D generator: wave amplitude, frequency, lighting direction, and colour palette.
4. Export as video. MP4 or WebM with seamless loop guarantee. Pro plans for 1080p; Studio plans for 4K. Both formats work in every modern video player and social platform.

Most "looping" backgrounds you see online are technically videos that just restart at the end. The brain notices the cut even when the visual transition is gentle. The studios 3D Loop mode prevents this by constraining the math itself rather than relying on careful timing.

Inside the wave shader, the surface displacement at any pixel is a function of position (x, y) and time (t). For the regular 3D mode, the time dependence is a smooth growing function that never repeats. For 3D Loop, the time dependence is constrained to be periodic with period equal to the loop duration:

uniform float u_time;
uniform float u_loop_duration;
uniform float u_amplitude;

float displacement(vec2 pos) {
  float t = u_time / u_loop_duration;
  // t is a value that cycles from 0 to 1 over the loop duration.
  // Use sin(2 * pi * t) so the wave returns exactly to its
  // starting value when t = 1.0 (same as t = 0.0).
  return u_amplitude * sin(2.0 * 3.14159 * t + pos.x * 0.1 + pos.y * 0.1);
}

The key mathematical property: sin(2π × 0) equals sin(2π × 1), so the displacement at frame 0 matches the displacement at the loops final frame exactly. This guarantee holds for every pixel on the canvas, not just for global parameters. As a result, the entire frame at t equals 0 matches the entire frame at t equals loop_duration pixel-for-pixel.

For users who want to verify: open the studio, set a short loop duration (5 seconds), export the MP4, and play it in a loop. If you cannot see the cut, the math is working correctly.

Retail and corporate digital signage is the highest-volume use case for seamless looping video. A video wall in a coffee shop, hotel lobby, or office reception plays the same content for hours, sometimes days. A visible jump cut every loop is the kind of detail that subtly degrades the brand impression.

Recommended workflow for signage and video wall content:

1. Open the studio at the displays native aspect ratio. Most modern displays are 16:9 (1920 by 1080) or 16:9 ultra-wide multiples thereof.
2. Pick a 30 to 60 second loop duration. Shorter loops become visible to viewers who linger; longer is unnecessary.
3. Tune the wave amplitude moderate. Aggressive wave motion looks strange on signage; calm motion reads as premium.
4. Palette should be branded but subdued. Signage runs in physical environments with their own light; saturated palette competes with the environment.
5. Export 4K MP4 on Studio plans. Most signage hardware supports 4K input; future-proof for higher resolutions.
6. Test the loop on a long-play setup before deploying. Play the video on repeat for at least 30 minutes in your test environment; any subtle loop point will become visible over that time.

For corporate signage where the loop will play in receptions and conference rooms, also consider an "interactive variant" using the React component export. The variant can subtly respond to time of day, day of week, or detected room activity. This requires more engineering but produces signage that feels alive rather than canned.

Social platforms increasingly require short looping videos: Spotify Canvas, Apple Music Animated Artwork, Instagram Reels covers, TikTok backgrounds, LinkedIn animated banners. The 3D Loop export targets all of these.

Recommended workflow:

1. Check the target platforms requirements for aspect ratio and duration. Most platforms accept 9:16 vertical (1080 by 1920) for short-form video.
2. Set loop duration to match the platform: Spotify Canvas 3 to 8 seconds, Apple Music 5 to 30 seconds, Instagram 6 to 15 seconds. Use the upper end of each range for a more comfortable visual rhythm.
3. Saturate the palette slightly more than for signage. Social feeds compete for attention; saturated colour wins.
4. Speed up wave motion slightly compared to signage. Social viewers scroll past in seconds; the motion needs to register immediately.
5. Export MP4 at 1080p. Most platforms compress on upload, so exporting at 4K is wasted bandwidth.
6. Upload and preview within the target app. Some platforms apply additional processing that affects visible quality; always preview before publishing.

• Signage and video walls. Retail, corporate, hospitality. The dominant high-value use case.
• Looped product video backgrounds. E-commerce product pages, especially for products without natural motion of their own.
• Spotify Canvas and music streaming visualisations. Short loops attached to tracks.
• Social media auto-loop videos. Instagram Reels, TikTok backgrounds, LinkedIn animated banners.
• Music video backplates. Especially for ambient, electronic, and contemplative genres.
• Live-stream backgrounds. Twitch overlays, YouTube live backgrounds, virtual event backdrops.
• Conference stage backdrops. Especially for tech and AI conferences with sculpted visual identity systems.
• Brand video bumpers. Short 5 to 10 second loops as intro and outro in longer brand video content.

1. Loop too short. Sub-3-second loops feel visibly repetitive. Even 5 seconds becomes noticeable after a few cycles. Use the longest loop the platform allows.
2. Loop too long. Above 60 seconds, the file size becomes unwieldy and the seamless loop guarantee becomes less obvious because viewers cannot mentally track that long. Stick to under 60 seconds.
3. Wave motion too aggressive. Strong wave amplitude looks chaotic in loop format because the same chaos repeats. For looping video, calmer motion is usually better.
4. Wrong aspect ratio for the platform. 16:9 in a 9:16 social feed gets cropped or letterboxed badly. Always export at the platforms native aspect ratio.
5. Using 3D Loop when 3D would do. If the export is a live React embed or a still PNG, you do not need the loop guarantee. The regular 3D mode is more flexible.
6. Not testing the loop before deploying. Always play the exported video on repeat for several cycles before publishing or installing on signage. Confirm the loop is visually seamless.