Use case / practical settings
Typing GIF for a Website Hero
Create portable animated hero text, or decide when live CSS text is the better format.
Recommended starting point
Match final display width · high contrast
- Use CSS when selectable responsive text matters.
- Use GIF for portability across builders.
- Reserve the layout space to prevent shifting.
CSS first, GIF when portability wins
If the hero text has to be selectable, translatable and responsive, use live CSS typewriter text. Reach for a GIF when the page builder cannot run that CSS, or when the animation must look byte-identical across every browser and device.
Open this starter in the GIF Maker →Reserve the space before it loads
A GIF has fixed pixel dimensions. Without a reserved box, the hero reflows when the image arrives and the page jumps under the reader’s cursor, which is the most common way an animated hero damages a landing page.
Search engines cannot read it
Text baked into a GIF is invisible to crawlers, translation tools and copy-paste. Keep the real headline in the HTML and let the animation repeat it, never replace it, or the page loses the words it is trying to rank for.
A starter you can actually use
Add a hero animation without hiding your headline
Choose a GIF when a site builder cannot run the preferred text animation. If the words need to be responsive, localized, or selectable, implement live HTML/CSS text instead.
Recommended editor settings
- 1,000 × 320 canvas
- Transparent background
- 80 ms typing / 1,300 ms hold
From editor to the final destination
- Load the hero starter and keep the changing phrases short enough to fit at the final displayed width.
- Export the GIF, check it on a real light and dark background, and compress or resize it before publication if needed.
- Reserve the image dimensions in the markup and keep a true H1 beside it; the image never replaces the main heading.
Accessible markup with reserved image dimensions
<h1>Build useful things faster</h1>
<img src="/assets/typing-hero.gif" width="1000" height="320" alt="We help you create, ship and stand out" />