Visual & media creation

Animated Gradient Video and Image Wrapper

Wrap Studio places one image or video inside an animated, catalogue-style layout without sending the source to a server. Pick a square, portrait, or landscape canvas, then choose one of three moving GLSL gradients. The central frame automatically keeps the uploaded media's aspect ratio. Series, title, and metadata text can each be changed or omitted before exporting the same composition as a full-resolution PNG or silent video.

What it does

  • Compose browser-readable images or videos inside 1080 × 1080, 1080 × 1350, or 1280 × 720 layouts.
  • Animate Signal, Aurora, or Ink GLSL gradient fields and adjust their color presence.
  • Match the central media frame to the uploaded image or video's aspect ratio automatically.
  • Configure or omit the series, title, and metadata text independently.
  • Export the current frame as PNG or record the complete animated composition as video.
didof.dev / toolsWrap Studio 01Local only
01 / Frame + motion

Wrap Studio

Place an image or video in a source-shaped frame over live GLSL color. Every label is optional, and the preview is the export.

Live GLSL composition1080 × 1080
No media selectedImage or video / processed locally

How to use Wrap Studio

  1. Choose your media

    Drop an image or video onto the uploader, or choose one from your device. If the browser can decode it, the preview opens it locally.

  2. Set the canvas

    Choose a square, portrait, or landscape layout. The central frame scales to fit while preserving the source media's aspect ratio.

  3. Shape the presentation

    Select a GLSL gradient palette, adjust color presence, and configure or disable every text field.

  4. Export the composition

    Download a full-resolution PNG, or record the animation as a silent video using the encoder available in the browser.

Formats, compatibility, and limits

Inputs

  • One image file that the browser can decode, including common PNG, JPEG, GIF, SVG, WebP, and AVIF files.
  • One video file that the browser can decode, including common MP4, MOV, M4V, MPEG, and WebM files.
  • Optional series, title, and metadata text for the catalogue caption.

Outputs

  • A full-resolution PNG at the selected canvas dimensions.
  • A 30 fps silent video in WebM or MP4, depending on the MediaRecorder encoders exposed by the browser.

Compatibility

  • Image composition and PNG export use the browser Canvas API.
  • Video playback and export depend on the formats and codecs supported by the current browser.
  • The editor adapts to smaller screens, while a desktop browser provides more room for the preview and controls.

Known limits

  • Recorded video is silent; audio from an uploaded video is not copied into the export.
  • Video recording runs in real time, so exporting a 20-second composition takes about 20 seconds.
  • The video container and codec cannot be chosen manually because the browser supplies the first supported MediaRecorder format.
  • Only one source image or video can be placed in a composition.

Privacy and processing

  • The selected file is opened through a temporary local object URL and is not uploaded by Wrap Studio.
  • Rendering, PNG creation, and video recording happen in the browser on the current device.
  • The temporary media URL is revoked when the source is replaced or the tool is closed.

How the animated wrapper is rendered

A WebGL fragment shader renders a domain-warped moving gradient, which is composited into one fixed-resolution 2D export canvas. The central aperture and matte derive their aspect ratio from the uploaded image or video, so the whole source remains visible without a square crop. Optional series, title, and metadata text are drawn into that same canvas, keeping the preview and exported file aligned. A PNG captures one frame. Video export records the canvas at 30 fps with MediaRecorder, using the source video's duration or a 6, 12, or 20 second duration for a still image, then downloads the local Blob.

Questions about Wrap Studio

Does Wrap Studio upload my image or video?

No. The tool opens the selected file through a temporary object URL and performs the composition and export in your browser.

Does the exported video include sound?

No. The recording contains the animated canvas only, so audio from a source video is not retained.

Why did my video export as WebM instead of MP4?

The browser decides which MediaRecorder formats are available. Wrap Studio uses the first supported option, and some browsers provide WebM encoding but no MP4 encoder.

What size is the exported composition?

Square exports are 1080 × 1080, portrait exports are 1080 × 1350, and landscape exports are 1280 × 720.