CruxDevCruxDev Tools Studio Prompts
image Utility • Zero-Server Privacy • 100% Client-Side

Motion Graphics Maker (Animated Text, Logos & Intros)

Keyframe animated text, logos, lower thirds and intros in your browser. Easing graph, trim paths, masks, 33 presets, 9 templates. Export WebM, MP4, GIF, PNG frames, Lottie or CSS.

Overview

A keyframe motion design editor for animated titles, logo reveals, lower thirds and short intros, in the spirit of After Effects but running in your browser tab. Build a composition from text, shapes, SVG logo paths, images, solids and null parents, animate any property with easing curves, then export WebM, MP4, GIF, a PNG sequence, Lottie JSON or CSS keyframes. Nothing is uploaded.

How It Works

Pick a size (1080p, 720p, square, vertical 9:16 or 4:5), a frame rate of 24, 30 or 60 fps and a duration up to 60 seconds, or start from one of nine templates. Add layers from the toolbar, then click the stopwatch beside a property such as position, scale, rotation, opacity, fill colour, blur, trim path or mask reveal to start animating it. Move the playhead, change the value and a new keyframe appears. Drag diamonds in the timeline to retime them, select one to edit its easing in the curve editor, and press Space to preview.

Step-by-Step Usage Guide

  1. Choose a template, or set the composition size, frame rate, duration and background in the Composition tab.
  2. Add text, shapes, an SVG logo, images or a null layer from the toolbar.
  3. Press the stopwatch next to a property, move the playhead and change the value to create keyframes.
  4. Select keyframes in the timeline and pick an easing, or drag the bezier handles in the curve editor.
  5. Apply presets such as fade up, pop, typewriter or draw on to speed up common moves.
  6. Open Export and choose WebM, MP4, GIF, PNG sequence, Lottie JSON or CSS @keyframes.

Technical Specifications & Standards

Every frame is drawn by one deterministic Canvas 2D renderer that maps a time to pixels, so the preview, the PNG frames, the GIF and the video all show the same picture for the same frame. Layer transforms follow the After Effects order of anchor, scale, rotation and position, and a child layer multiplies in its parent's matrix, which is how null layers act as groups. Cubic-bezier easing is solved with Newton-Raphson and a bisection fallback, matching the CSS cubic-bezier() function, and a spring easing uses the closed-form damped oscillator stretched so it settles exactly on the next keyframe. Shapes and imported SVG paths are flattened to polylines once, and trim path start, end and offset cut that same outline by arc length, which gives an accurate stroke draw-on. Video export prefers WebCodecs: frames are encoded with VP9 or VP8 and written by a small built-in WebM muxer, or with H.264 into an MP4 container when the browser supports it. Without WebCodecs the tool falls back to MediaRecorder, which records in real time. Text animators stagger by character, word or line, with forward, reverse, centre-out or random order, a typewriter mode with a caret and a looping wave.

Targeted Use Cases

  • Making a five second YouTube channel intro with a logo sting and a channel name.
  • Adding a name and job title lower third to an interview recording.
  • Animating an SVG logo so its outline draws on with a trim path.
  • Creating a vertical 9:16 Instagram or TikTok story promo with kinetic text.
  • Producing a Lottie file or CSS animation for a website hero or loading state.
  • Building a countdown or subscribe reminder overlay for a live stream.

Notes & Gotchas

  • Use a null layer as a parent when several layers should move or scale together.
  • Keep GIF exports short and at 50% resolution, since GIF stores every frame with its own palette.
  • Choose transparent background with a PNG sequence when the animation will be composited in a video editor.
  • Save a .cruxmotion file before big changes; autosave keeps only the latest project in this browser.

Frequently Asked Questions

Which easing curves can I use between keyframes?

Linear, ease in, ease out, ease in-out, a custom cubic-bezier with draggable handles, a physical spring with stiffness, damping and mass, bounce, steps and hold. Hold keeps a value until the next keyframe, which suits glitch and flicker effects.

Does the Lottie export support everything in the editor?

No. Lottie export covers shapes, solids, images, null parents, static text, transforms, opacity, fill, stroke, corner radius and trim paths. Spring, bounce and steps easing are baked to one key per frame. Blur, mask reveals and per-character text animation are not exported, and the tool lists what was left out.

Why is my MP4 option unavailable?

MP4 export needs an H.264 encoder through WebCodecs, which Chrome, Edge and recent Safari provide. Firefox can usually encode VP8 or VP9, so WebM export still works there. Where WebCodecs is missing entirely, WebM is recorded in real time with MediaRecorder.

Can I keep a transparent background?

Yes for PNG stills, PNG sequence ZIP files and GIF, which keeps one transparent colour. The WebM and MP4 exports are opaque, so a transparent background renders as black in video files.

Are my projects and uploaded files private?

Images, SVG logos and fonts are read locally and embedded in the project. The project is autosaved to IndexedDB in this browser and can be saved as a .cruxmotion JSON file. Nothing is sent to a server.

Related tools

  • 2D Animation & Flipbook Studio - Draw frame-by-frame animation in your browser with pressure-sensitive brushes, layers, onion skinning and a hold timeline, then export GIF, APNG, WebM, a PNG sequence or a sprite sheet with JSON.
  • CSS Keyframe Animation Timeline Studio - Design smooth keyframe animations with easing curves, timeline previews, and production-ready @keyframes CSS.
  • Online Video Editor (Timeline, Trim, Text & Music) - Edit video in your browser on a multi-track timeline: trim, split, speed, fades, filters, transitions, titles, logos and music, then export WebM or a WAV mix. Files never leave your device.
  • GIF Maker - Make an animated GIF from images or a short video. Reorder frames, set per-frame delays, loop count, size and colours, with optional dithering. Encoding runs in a background worker with progress.
  • Graphic Designer (Posters, Social Posts & Thumbnails) - Design posts, thumbnails, posters, flyers and newsletters from 114 editable templates. Parent pages, threaded text, columns, text wrap, CMYK swatches, preflight and vector PDF with bleed and crop marks, all in your browser.
  • Photo Collage Maker - Arrange 2 to 9 photos in grid and feature layouts. Adjust spacing, corner radius, background, aspect ratio and output width, drag photos between cells, zoom and pan each crop, and export PNG or JPG.