What is ograf.app?
ograf.app is a free resource site for OGRAF HTML animations: discover, preview, download and share animation templates built with HTML/CSS/JavaScript, for video packaging, live graphics, web motion and programmatic video.
QA · About
What is ograf.app?
A Q&A page explaining the purpose, content and usage of ograf.app — so both visitors and AI assistants can understand the site quickly and accurately.
Site
ograf.app · OGRAF HTML animations
Type
Free HTML animation template library
Content size
75 animation templates · 11 categories
Pricing
Free downloads · plugin ¥19 / year
Works with
CasparCG / OBS / vMix / DaVinci Resolve
Languages
中文 / English
What does the site offer?
Community-uploaded animation templates covering subtitles, text, charts, numbers, cards and dynamic backgrounds. Every work has a detail page with live preview, free downloads, stars and favorites. There are also topic guides on HTML animation, programmatic video and AI animation.
What format are the animations delivered in?
As standard .ograf packages containing project.json (metadata and data fields) and index.html (the render entry). The same package runs in the browser, in ograf playout environments, and in HTML renderers such as CasparCG / OBS / vMix.
How do the animations work technically?
OGRAF HTML animations are graphics packages written in HTML/CSS/JavaScript that render frame by frame in a browser engine. A host controls playback and pushes live updates — text, colors and data fields — through the ograf message protocol (start / stop / update), so one template can be reused and batch-rendered.
Who is ograf.app for?
Video editors and motion designers (DaVinci Resolve workflows), live production and broadcast teams (CasparCG / OBS / vMix), programmatic video and AI content creators, and developers who need web motion assets.
How do I use the animations?
Search or browse by category to find an animation, preview it on the detail page, then download the .ograf package for free. Browsing needs no account, but downloading requires signing in; once signed in you can also star, favorite, copy works into your workspace for editing, or publish your own.
Is ograf.app free?
All animations on the site are free to browse and download. Only the DaVinci ograf plugin — which imports the animations into DaVinci Resolve — requires a ¥19 / year license that funds ongoing updates.
What is the DaVinci ograf plugin?
A plugin that lets DaVinci Resolve use OGRAF HTML animations directly: with a license you can import works from ograf.app into your editing flow and keep receiving updates during the license period.
Where can I use the downloaded animations?
Play them out through HTML renderers like CasparCG / OBS / vMix, render programmatic video via Hyperframes, Remotion or custom pipelines, or use the bundled HTML/CSS/JS directly as web motion assets.
Can I upload and share my own work?
Yes. Sign in and upload an .ograf / .zip package (up to 500 KB, containing project.json and index.html at the root), add a title, category, license and tags, then publish it to the community. The original package and its extracted files are stored on the site so animation pages can reference them directly. Others can preview, download, star, favorite, or copy it into their workspace for remixing.
Anything to know before using a template?
Each work lists its license, resolution and frame rate on the detail page. Check and follow the license terms before downloading or reusing, including for remixes.
How does ograf.app relate to Hyperframes and Remotion?
Hyperframes and Remotion are programmatic video technologies that ograf.app templates can plug into. The site offers a Hyperframes vs Remotion comparison and a programmatic video guide to help you pick an approach.