# Animatiq

> Animatiq creates editable videos from code using React and HTML. It generates
> clips, animations, and images using top generative AI models, edits, cuts, and
> captions existing footage, and builds motion design components, slideshows, and
> other video artefacts. Every scene is stored as parameters rather than baked
> pixels, so any line can be changed and re-rendered months later without
> rebuilding the piece.

Animatiq is made by Pixloop. Projects are React/HTML compositions with typed
props: the output is real source, not an opaque render. The rendering layer is
built on Remotion, the open-source React video framework; the catalog's motion
components are built on the HyperFrames registry.

## Catalog

477 motion components and blocks, each with a live preview and a
clear customization summary. Components drop into a project; blocks are assembled scenes.

- [Catalog index](https://animatiq.ai/catalog)
- [Captions](https://animatiq.ai/catalog/category/captions): Word-level caption styles that sync to a transcript — kinetic slams, karaoke pills, glitch and neon treatments, and editorial emphasis. Real Remotion source with typed props. (17 items)
- [Text animation](https://animatiq.ai/catalog/category/typography): Reusable glyph, word, and phrase animation — kinetic swaps, blur reveals, tracking, variable-font motion, and deterministic type effects. (62 items)
- [Titles](https://animatiq.ai/catalog/category/titles): Full-frame title moments, headline reveals, CTA closes, and restrained lockups for openings, chapter beats, and endings. (11 items)
- [Logo animation](https://animatiq.ai/catalog/category/logo-animation): Swoops, spins, SVG traces, particle builds, modular reconstruction, dimensional flips, light sweeps, and branded outros driven by replaceable logo assets. (23 items)
- [Lower thirds](https://animatiq.ai/catalog/category/lower-thirds): Name straps, role cards, broadcast bars, soft pills, and footage-safe identifiers for interviews, podcasts, news, and creator video. (13 items)
- [Tickers & marquees](https://animatiq.ai/catalog/category/tickers): News crawls, repeating text rails, split-flap displays, perspective marquees, and ticker-to-headline takeovers. (5 items)
- [Annotations & callouts](https://animatiq.ai/catalog/category/annotations): Drawn arrows, highlights, circles, labels, connectors, speech bubbles, and whiteboard marks for directing attention inside a scene. (15 items)
- [Transitions](https://animatiq.ai/catalog/category/transitions): Wipes, morphs, dissolves, whip pans, match cuts, glitch and chromatic splits, and shader-driven distortions. Each one a timed component you drop between two shots. (47 items)
- [Backgrounds & atmospheres](https://animatiq.ai/catalog/category/backgrounds): Aurora fields, mesh gradients, halftone and grain surfaces, responsive grids, liquid planes, and ambient spatial backgrounds. (14 items)
- [Code](https://animatiq.ai/catalog/category/code): Typing effects, diff reveals, syntax-highlighted scroll, 3D extrusion, and a full set of terminal themes — for developer explainers, changelogs, and launch videos. (38 items)
- [Charts & metrics](https://animatiq.ai/catalog/category/data): Bar chart races, count-ups, line charts, progress arcs, ratings, gauges, and metric cards driven by real values. (14 items)
- [Maps & geography](https://animatiq.ai/catalog/category/maps): Choropleths, bubble and flow maps, hex cartograms, world views, and editorial location stories built on real geographic data. (9 items)
- [Diagrams & flows](https://animatiq.ai/catalog/category/diagrams): Flowcharts, decision trees, pipelines, hubs, networks, and connected-node scenes that reveal structure in reading order. (14 items)
- [Effects & VFX](https://animatiq.ai/catalog/category/effects): Compositing effects, particles, light sweeps, masks, material motion, portals, shatters, and other scene-level visual treatments. (20 items)
- [Camera moves & focus](https://animatiq.ai/catalog/category/camera): Push-ins, pull-backs, dolly zooms, rack focus, parallax dives, pans, and scrolling camera stories for layered compositions. (10 items)
- [Product demos](https://animatiq.ai/catalog/category/showcase): Device frames, app walkthroughs, liquid-glass surfaces, proof cards, and polished product moments for launches and demos. (30 items)
- [Scenes & layouts](https://animatiq.ai/catalog/category/layouts): Reusable split screens, comparison frames, product stages, radial compositions, and modular canvases with frame-driven motion. (14 items)
- [Galleries & carousels](https://animatiq.ai/catalog/category/galleries): Card rails, image reels, spatial tunnels, bento pans, stacked decks, scrolling feeds, and snap-driven media galleries. (10 items)
- [UI motion](https://animatiq.ai/catalog/category/ui-motion): Buttons, toggles, sheets, tabs, cursors, gestures, feedback states, onboarding flows, and product-interface transitions. (36 items)
- [Social overlays](https://animatiq.ai/catalog/category/social-overlays): Posts, comments, follow cards, notifications, typing states, media cards, and camera HUDs designed to layer over footage. (14 items)
- [Scene filters](https://animatiq.ai/catalog/category/filters): Camera lens, CRT, VHS, hologram, underwater, halftone, security-camera, and regional pixelation treatments that wrap an existing scene. (11 items)
- [Animated icons](https://animatiq.ai/catalog/category/icons): One frame-driven component with 100 selectable icons and draw, action, or combined motion modes. (1 items)
- [Sound effects](https://animatiq.ai/catalog/category/sfx): Licensed impacts, whooshes, clicks, glitches, risers, notifications, typing, and UI accents that can be copied into a project without generating replacements. (19 items)
- [Voices](https://animatiq.ai/catalog/category/voices): Curated AI text-to-speech voices with playable samples, character tags, and tone profiles across supported models. (30 items)

## Glossary

Plain definitions of motion-design terms, each with working examples in the catalog.

- [Animated icons](https://animatiq.ai/glossary/animated-icons): Animated icons are vector symbols — checkmarks, shields, lightning bolts, and settings gears — that draw on, morph between states, or perform looped actions to reinforce messaging.
- [Annotations & callouts](https://animatiq.ai/glossary/annotations-and-callouts): Annotations and callouts are motivated graphic markers — hand-drawn arrows, highlight rings, speech bubbles, and drawn underlines — that direct visual focus to a specific element.
- [Aspect ratios & safe areas](https://animatiq.ai/glossary/aspect-ratio): Aspect ratio is the proportional relationship between a video frame's width and height (16:9 for landscape, 9:16 for vertical reels, 1:1 for square feeds), defining compositional margins and UI safe zones.
- [B-roll & cutaways](https://animatiq.ai/glossary/b-roll): B-roll is supplementary footage, device mockups, or motion diagrams cut over primary footage to illustrate the speaker's words and seamlessly conceal edit seams.
- [Backgrounds & atmospheres](https://animatiq.ai/glossary/animated-backgrounds): Animated backgrounds are ambient, looping visual surfaces — fluid mesh gradients, aurora fields, and responsive grids — that provide spatial depth behind foreground content.
- [Camera moves & focus](https://animatiq.ai/glossary/camera-movement): Camera movement applies the spatial language of cinematography — push-ins, pull-backs, orbit rotations, and rack focus — to 2D graphic canvases that possess no physical lens.
- [Charts & metrics](https://animatiq.ai/glossary/data-storytelling): Data storytelling is the animated revelation of charts, metric count-ups, and graphs in sequential narrative order, guiding the viewer from premise to statistical conclusion.
- [Code & terminal animation](https://animatiq.ai/glossary/code-animation): Code animation is the presentation of programming code and CLI terminals on screen — typing simulations, syntax highlighting, diff additions/deletions, and command executions.
- [Diagrams & flows](https://animatiq.ai/glossary/animated-diagrams): Animated diagrams are structural process visualizations — flowcharts, architecture pipelines, decision trees, and connected node graphs — that illuminate systemic relationships.
- [Easing & easing curves](https://animatiq.ai/glossary/easing): Easing is the rate at which an animated value changes over time — the mathematical curve defining whether motion accelerates, decelerates, or maintains mechanical constant velocity.
- [Effects & VFX](https://animatiq.ai/glossary/motion-effects): Motion effects and VFX are physical, optical, or particle treatments — light sweeps, glass refraction, liquid surfaces, and explosions — that enhance realism or visual impact.
- [Frame rates & timebase determinism](https://animatiq.ai/glossary/frame-rate-timebase): Frame rate is the frequency at which consecutive images appear on screen (e.g. 30fps, 60fps, 24fps); timebase determinism is the guarantee that frame N represents the exact same temporal state every render.
- [Galleries & carousels](https://animatiq.ai/glossary/galleries-and-carousels): Galleries and carousels are multi-item motion structures — Cover Flow decks, 3D tunnel reels, and scrolling card feeds — that display portfolios, product catalogs, and collections.
- [Keyframing & deterministic interpolation](https://animatiq.ai/glossary/keyframe): A keyframe marks a specific property value at a designated point in time, allowing software to calculate all intermediate states (in-betweens) through deterministic mathematical interpolation.
- [Kinetic typography](https://animatiq.ai/glossary/kinetic-typography): Kinetic typography is the expressive animation of text itself — words and glyphs that move, scale, shear, or morph in rhythm with narrative meaning rather than merely labelling a shot.
- [Logo sting](https://animatiq.ai/glossary/logo-sting): A logo sting is a brief 1- to 3-second animated sequence that reveals a brand's emblem or wordmark, serving as a signature intro or closing seal.
- [Lower third](https://animatiq.ai/glossary/lower-third): A lower third is a graphic overlay positioned in the lower portion of the screen that identifies a speaker, location, or subject without obstructing key facial features.
- [Maps & geography](https://animatiq.ai/glossary/map-animation): Map animation is the dynamic visualization of geographic data — choropleth color fills, flight route arcs, territory expansions, and regional pins across vector world and regional maps.
- [Masking, mattes & alpha channels](https://animatiq.ai/glossary/masking-and-mattes): Masking is the technique of using an outline, shape, or luminance texture (matte) to restrict the visible region of an underlying layer, creating reveals, wipes, and cutouts.
- [Match cuts & visual rhymes](https://animatiq.ai/glossary/match-cut): A match cut is an edit between two shots that share a common shape, color, or trajectory, creating instantaneous conceptual continuity across a dramatic shift in subject or setting.
- [Motion blur & shutter angle](https://animatiq.ai/glossary/motion-blur): Motion blur is the visual streaking of rapidly moving objects along their trajectory, caused by the integration of light during the camera's shutter interval.
- [Parallax & spatial depth](https://animatiq.ai/glossary/parallax): Parallax is the visual phenomenon where objects closer to the camera appear to move faster across the field of view than distant objects, creating an illusion of true 3D spatial depth.
- [Product demos & devices](https://animatiq.ai/glossary/product-demos): Product demos and device scenes present digital software interfaces inside simulated smartphone, tablet, or desktop frames with realistic camera staging and cursor interactions.
- [Programmatic video & video-as-code](https://animatiq.ai/glossary/programmatic-video): Programmatic video is video authored as software code — using React, TypeScript, and deterministic time functions — so each frame is produced by code and can be rendered at scale with dynamic data.
- [Scene filters](https://animatiq.ai/glossary/scene-filters): A scene filter is an overarching post-processing treatment — such as CRT scanlines, VHS tracking errors, halftone stippling, or lens aberration — applied across a completed composition.
- [Scenes & layouts](https://animatiq.ai/glossary/scene-layouts): Scenes and layouts are structural composition systems — split screens, radial stages, side-by-side comparisons, and responsive frames — that organize multi-element narratives.
- [Shaders & GPU procedural motion](https://animatiq.ai/glossary/shader): A shader is a program running directly on the GPU that calculates color for millions of pixels in parallel every frame, enabling procedural noise, caustics, and organic distortions.
- [Social overlays](https://animatiq.ai/glossary/social-overlays): Social overlays are authentic recreations of platform-specific interface cards — X posts, Reddit threads, TikTok follows, and push notifications — designed to layer over footage as social proof.
- [Sound effects & foley](https://animatiq.ai/glossary/sound-design-and-foley): Sound effects and foley are acoustic accents — whooshes, clicks, impacts, risers, and ambient drones — that make visual motion feel physical and tactile.
- [Spring physics & overshoot](https://animatiq.ai/glossary/spring-physics): Spring physics is a physical simulation model based on Hooke's Law that computes motion from mass, tension (stiffness), and friction (damping), producing organic overshoot and settlement.
- [Staggering & cascades](https://animatiq.ai/glossary/staggering): Staggering is the deliberate time offset applied between multiple related elements in a group, so they enter sequentially in cascade rather than appearing simultaneously.
- [Tickers & marquees](https://animatiq.ai/glossary/tickers-and-marquees): A ticker or marquee is a continuous, horizontally or perspective-scrolling strip of textual data, stock metrics, or headlines designed to convey steady information flow.
- [Timing, spacing & rhythm](https://animatiq.ai/glossary/timing-and-spacing): Timing is the number of frames an action takes; spacing is the variation in position between successive frames; rhythm is the overarching cadence governing the pace of cuts and arrivals.
- [Titles & brand sequences](https://animatiq.ai/glossary/title-card): A title card is a full-frame graphic presentation of text and identity, used to establish narrative premises, demarcate chapters, or deliver memorable closing statements.
- [UI motion & microinteractions](https://animatiq.ai/glossary/ui-motion): UI motion is the animation of user interface elements — buttons, toggles, sheets, tabs, and modals — demonstrating cause and effect and operational feedback inside software.
- [Video transitions](https://animatiq.ai/glossary/video-transition): A video transition is the visual join between two adjacent shots — a cut, wipe, morph, whip-pan, or shader distortion that carries the viewer across a temporal or spatial boundary.
- [Word-level captions](https://animatiq.ai/glossary/word-level-captions): Word-level captions are subtitles timed to individual words rather than full phrases, where each word dynamically scales, highlights, or enters at the exact millisecond it is spoken.

## Comparisons

Where Animatiq fits against the alternatives, including where it is the weaker choice.

- [Animatiq vs After Effects](https://animatiq.ai/compare/animatiq-vs-after-effects): After Effects is the right tool when a piece is bespoke and hand-tuned; Animatiq is the right tool when a piece is structured, repeated, or has to be edited again later, because its output stays parametric instead of being flattened into a render.
- [Animatiq vs AI video generators](https://animatiq.ai/compare/animatiq-vs-ai-video-generators): Generative video models produce a clip you cannot revise; Animatiq produces a composition you can — so generators suit imagery and mood, and Animatiq suits pieces where specific words, numbers, and brand details have to be exactly right and stay editable.
- [Animatiq vs video templates](https://animatiq.ai/compare/animatiq-vs-video-templates): A template gives you someone else's structure to fill in; Animatiq generates a structure for your brief and leaves every part of it editable — so templates win on speed for common formats, and Animatiq wins when the piece has to fit your content rather than the other way round.
- [Animatiq vs hiring a motion design agency](https://animatiq.ai/compare/animatiq-vs-motion-design-agency): An agency is the right call when a piece needs original creative direction and someone accountable for it; Animatiq is the right call for the steady volume of pieces underneath that — the ones that never get made because a project is too small to brief out.

## Use cases

- [Launch videos that make the product feel real](https://animatiq.ai/use-cases/product-launch-videos)
- [Product demos built around the moment that matters](https://animatiq.ai/use-cases/product-demo-videos)
- [Turn a product website into an evidence-led video](https://animatiq.ai/use-cases/website-to-video)
- [Make complex ideas obvious without flattening them](https://animatiq.ai/use-cases/explainer-videos)
- [Turn written updates into stories people will watch](https://animatiq.ai/use-cases/article-and-pr-videos)
- [Give spoken video a designed visual rhythm](https://animatiq.ai/use-cases/talking-head-motion-graphics)
- [Turn data into a visual argument](https://animatiq.ai/use-cases/animated-data-stories)
- [Build motion that listens to the track](https://animatiq.ai/use-cases/music-visualizers)
- [Turn a static identity into a repeatable motion language](https://animatiq.ai/use-cases/logo-and-brand-motion)
- [Adapt one idea into platform-native motion](https://animatiq.ai/use-cases/social-video-cutdowns)
- [Give still images pace, hierarchy, and emotional shape](https://animatiq.ai/use-cases/slideshow-and-photo-stories)
- [Teach the first successful product journey](https://animatiq.ai/use-cases/onboarding-videos)

## Blog

- [Building a 350-item motion catalog: licensing, attribution, and what we learned](https://animatiq.ai/blog/building-a-350-item-motion-catalog-licensing-and-what-we-learned): Most of the catalog is adapted from an Apache-licensed registry and one MIT-licensed component set. Here is what that actually obligates us to do, and what it doesn't.
- [What a lower third actually needs to say](https://animatiq.ai/blog/what-a-lower-third-actually-needs-to-say): A name and a role sound simple until you have to fit them into a band that also has to survive vertical video, a busy background, and three seconds of attention.
- [From brief to broadcast: how a sentence becomes a scene list](https://animatiq.ai/blog/from-brief-to-broadcast-how-animatiq-turns-a-sentence-into-a-scene-list): Between "make me a launch video" and a finished project, something has to decide how many scenes there are and what each one does. Here is what that step actually looks like.
- [The motion design glossary: terms your brief should actually use](https://animatiq.ai/blog/the-motion-design-glossary-terms-your-brief-should-use): A brief that says "make it pop" gets you a guess. A brief that says "a hard cut on a match cut, then a lower third" gets you what you meant.
- [The problem with AI video generators for product marketing](https://animatiq.ai/blog/the-problem-with-ai-video-generators-for-product-marketing): A generative model samples pixels. Product marketing needs exact words, exact numbers, and a logo that stays a logo. Those are different jobs.
- [Kinetic typography, explained with real examples](https://animatiq.ai/blog/kinetic-typography-explained-with-real-examples): The technique is animating letters, not text boxes. Here is the difference, and six catalog components that show it.
- [How we rendered 350 motion-design previews on Remotion Lambda](https://animatiq.ai/blog/how-we-rendered-350-motion-design-previews-on-remotion-lambda): The catalog needed real hover-preview video for every item, not static posters. Rendering 350 clips serially on one machine would have taken hours. Here is what we actually did.
- [Why "editable forever" is the whole pitch](https://animatiq.ai/blog/why-editable-forever-is-the-whole-pitch): A rendered video is pixels. A project is parameters. That difference is the entire argument, and it only shows up the second time you need to change something.

## Other pages

- [About](https://animatiq.ai/about): what Animatiq is, who it's for, and FAQ
- [Community](https://animatiq.ai/community): public projects made with Animatiq
- [Templates](https://animatiq.ai/templates): starting points for a new project
- [Contact](https://animatiq.ai/contact)
- [Attribution](https://animatiq.ai/catalog/attribution): catalog provenance and licensing

## Notes

- Catalog item pages live at https://animatiq.ai/catalog/{components|blocks}/{name}
- Catalog metadata is derived from the HyperFrames registry (c) HeyGen, Apache 2.0;
  implementations are independent Remotion rewrites. See the attribution page.