Guides · · Maxwell Prehoda
11 Hero Section Animation Examples: Globes, Light Beams, 3D Scenes and Headlines That Move
A hero animation has about one second to explain the product, and it must not slow down the first paint. The heroes that manage both follow the same pattern: something real paints immediately (an image, an SVG, styled text), and the heavier motion fades in on top once the page is usable. GitHub's globe, the most-cited hero of the last few years, works exactly this way.
Below are 11 hero animations worth studying: data globes, light-beam headers, 3D and interactive scenes, headline animations and product videos, each with what it is best for, the stack it needs and the cost it carries. Several come with a live pure-CSS demo of the same idea from our directory, so you can see the lightweight version next to the heavy one.
1. GitHub's homepage globe: Best for platforms with real global activity to show
Platform: three.js + WebGL, custom shaders
Tobias Ahlin's write-up of the GitHub globe is a model for any heavy hero. The globe plots real data: blue spikes for pull requests being opened and pink arcs from where a merged pull request was opened to where it was merged. Land is about 12,000 small circles sampled from a world-map image and drawn with a single InstancedMesh, with no textures at all.
The performance work is the part to copy. An SVG globe made in Figma paints first and crossfades to the canvas with the Web Animations API. The team watches frame rate, and "if we fail to maintain 55.5 FPS over the last 50 frames we start to degrade the quality of the scene": lower pixel ratio, fewer raycasts, and fewer circles.
Our Hologram Loader below is a pure-CSS nod to the same idea at icon scale: a wireframe globe spins in a cone of light, built from ellipses rather than WebGL.
Watch out for: The post does not cover reduced motion. If you build a spinning data globe, stop the rotation under prefers-reduced-motion and keep the data readable without it.
2. COBE and Magic UI's Globe: Best for a lightweight globe without writing three.js
Platform: COBE (MIT, about 5KB WebGL); Magic UI wrapper for React
If you want a globe hero without GitHub's engineering budget, COBE by Shu Ding is the usual answer. Its README pitches it as a "5KB WebGL globe lib" with zero dependencies, and you can bind any DOM element as a marker so CSS transitions and interactivity still work on top of it. You pass a canvas and settings such as phi, theta, dark and diffuse, then rotate it each frame.
Magic UI's Globe component wraps COBE as an auto-rotating, interactive React component you add with the shadcn CLI, which is the fastest route in a Next.js and Tailwind project.
Watch out for: A globe is a cliché in SaaS heroes now. Use one only if location or reach is your story, and put real numbers near it so it says something.
3. Aceternity UI's Lamp effect: Best for dark SaaS heroes with a single glowing headline
Platform: React component via the shadcn CLI
Aceternity describes its Lamp effect as "inspired by Linear's design" and meant for section headers: a cone of light opens above a headline on a dark background, so the text seems lit from above. It installs with `npx shadcn@latest add @aceternity/lamp`.
Light-from-above heroes work because they direct the eye. The brightest pixel on the screen sits right above the headline, so it is read first.
Our Spotlight Background below is a pure-CSS version of stage lighting for a hero: two soft cones hang from the top of a dark stage and sweep back and forth, each a conic gradient with a feathered edge.
Watch out for: Glow effects on dark backgrounds wash out on cheap displays and in bright rooms. Check the headline contrast with the light at its dimmest point, not its brightest.
4. Spline 3D heroes: Best for designers who want an interactive 3D hero without code
Platform: Spline (browser 3D tool), embed or React component
Spline is a browser-based 3D design tool with states, keyframes, events and physics, so a hero object can float, follow the cursor or react to a click. You publish a link, embed the viewer, export code to host yourself, or drop the scene into React with the official react-spline component (MIT).
It has become the default for floating product objects and abstract 3D shapes in startup heroes, because a designer can build and tune the whole interaction without a developer.
Watch out for: 3D scenes load a runtime plus the scene file, which can delay interactivity. Show a poster image first, lazy-load the scene, and test on a mid-range phone.
5. Rive interactive heroes: Best for illustrated heroes that react to the cursor
Platform: Rive editor + web runtime (.riv file)
Rive's hero animation tutorials walk through building an interactive illustration for a website hero: a state machine that drives the scene, a "Follow mouse" setup so characters and objects track the cursor, and translation constraints for a 2.5D head-tracking rig. Rive pitches the .riv format as "one small file for art, motion, and logic."
Choose Rive over video when the hero should respond: a mascot that looks at your cursor, a product diagram that reacts on hover, a scene with idle and active states.
Watch out for: Rive needs its runtime on the page. For a hero, preload only the .riv you need and render a static first frame so there is no blank box while it loads.
6. Motion UI's editorial and split-text heroes: Best for text-first heroes in React apps
Platform: React + Motion, installed via shadcn (some sections in Motion+)
Motion's hero sections show how far a headline alone can go. The Editorial stagger hero reveals the headline line by line through a mask with an orchestrated stagger; the Split text reveal brings in the headline and supporting copy word by word. Others pair parallax layers with a product window or type out a terminal session.
A moving headline is the cheapest hero animation there is: no images, no canvas, nothing to download beyond the font. It also keeps the hero's main content as real text for search engines.
Our Blur In below is a pure-CSS headline entrance in the same spirit: the text comes into focus from a heavy blur, like a camera pulling focus.
Watch out for: Word-by-word reveals delay reading. Keep the whole headline readable within about a second, and never hide it behind JavaScript that has not loaded.
7. Contiant's changing headline and flow diagram: Best for fintech and B2B heroes explaining a process
Platform: Website (animated heading and diagram)
LogRocket's December 2025 breakdown of hero sections uses Contiant as its example of an animated hero: the first part of the heading slides and changes, the words "Open Banking" get a double underline, and an animated diagram shows a sample transaction flow.
Two motions, two jobs: the changing heading says who it is for, and the diagram says how it works. That is a complete pitch without a single paragraph of copy.
Our Highlighter Rotating Words below is a pure-CSS take on the changing-heading half: each new word fades in and a highlighter stroke sweeps under it.
Watch out for: Rotating headline words are invisible to anyone who reads only the first one. Put the most important audience first, and keep every variant in the HTML.
8. Zoom's product showcase video: Best for products best explained by showing the real UI
Platform: HTML video in the hero
LogRocket's other hero type is the product showcase: a short, pausable, repeating video or animation that summarises the product, with Zoom's video preview of its main features as the example. For software with a visual workflow, real footage of the UI answers "what does it do" faster than any illustration.
The word pausable matters. WCAG 2.2 success criterion 2.2.2 says that moving content which starts automatically, lasts more than five seconds and sits alongside other content needs "a mechanism for the user to pause, stop, or hide it."
Watch out for: A hero video is often the largest asset on the page. Use a poster image, a muted short loop in a modern codec, preload="none" on slow connections, and a visible pause button.
9. Our Spotlight Text Reveal: Best for dramatic text-only heroes in pure CSS
Platform: Motions directory, free Ours
If your hero is a headline on a dark background, the headline can be the animation. Our Spotlight Text Reveal keeps the text as a faint ghost until a soft spotlight sweeps across it, then the light widens to show the whole line.
It is two mask layers and real text, so it paints with the page, costs nothing to download and stays selectable. Browse the Text Reveal Animations collection for calmer entrances.
Watch out for: The ghost state must still meet contrast for anyone who sees it before the reveal finishes, or under reduced motion. Our version shows the full line when motion is reduced.
10. Our Announcement Pill: Best for the small launch badge above a hero headline
Platform: Motions directory, free Ours
Many SaaS heroes open with a small pill above the headline announcing a launch or a funding round. Our Announcement Pill is that element: a solid New tag with a pinging dot, a one-line announcement and a chevron that moves on hover.
It gives the hero a single point of motion without animating the headline itself, which is often the best balance for a page that needs to feel alive and stay calm.
Watch out for: A ping that loops forever pulls the eye away from the headline. Let it ping a few times on load, then stop.
11. Our Keynote Product Reveal: Best for a hardware-style product reveal for a launch
Platform: Motions Animation Studio (video export) Ours
For a launch-day hero or the video that goes with it, our Keynote Product Reveal was made in the Animation Studio: a device built in three.js rises out of total darkness while a softbox reflection glides along its edge, then a quiet headline lands.
Describe your own product reveal in the Studio, scrub the timeline, tune the eases, and export HTML, React, MP4 or GIF. A short MP4 loop with a poster frame makes a lightweight hero; the HTML export keeps it crisp at any size.
Watch out for: Cinematic reveals take a few seconds to land. In a hero, start on a frame where the product is already visible, so nobody stares at a black box.
How to choose a hero animation
Match it to the story
Global reach gets a globe (GitHub, COBE). A process gets a diagram that moves (Contiant). A visual product gets real footage (Zoom). A brand with a character gets an interactive illustration (Rive). A bold claim gets a lit or revealed headline (Aceternity's lamp, our spotlight text). If none of these is your story, animate the headline lightly and let the product screenshot do the work.
Match it to the first paint
Paint something real immediately and enhance it later, the way GitHub shows an SVG globe before the WebGL one. CSS and text animations cost nothing to load; Spline, Rive and three.js each add a runtime and an asset. Give heavy heroes a poster image, load them after the page is usable, and drop quality on slow devices. Our landing page animation examples show how Vercel staged its hero the same way.
Match it to the people
Anything that moves for more than five seconds alongside other content needs a pause control under WCAG 2.2.2. Under prefers-reduced-motion, stop rotations and loops and show the final frame. Cursor-reactive heroes need a static equivalent on touch screens. For full-page motion behind the hero, see our animated background examples.
Ship a hero that moves without slowing down
Write your hero's one-sentence pitch, then pick the single motion that proves it: a globe, a diagram, a video, a lit headline. Build the static version first, make sure it sells on its own, and add the motion on top.
If you want the CSS layer written for you, paste your hero HTML or a screenshot into the creator and describe the motion. You get keyframes that paint with the page, plus a reduced-motion fallback.
Animate this hero section (HTML below) in pure CSS. A soft cone of light opens above the headline over 900ms ease-out, then holds. The headline fades up 10px after 200ms, the subhead and button follow 120ms apart. The announcement pill above pings its dot three times, then stops. Nothing may delay the first paint, and under prefers-reduced-motion show the final lit state with no movement.
Common questions
What is a hero section animation?
Motion in the first screen of a website, around the main headline: a moving background, a 3D object, a product video, an animated diagram or a headline that reveals itself. Its job is to explain the product quickly and draw the eye to the headline and call to action.
Do hero animations hurt page speed?
They can, because the hero holds the Largest Contentful Paint. Keep the hero's main image or text in the HTML so it paints right away, animate transform and opacity, and load heavy layers like WebGL, Spline or video after the page is usable, as GitHub does with its globe.
How do I make an animated hero section with CSS?
Animate the headline with a keyframe on opacity and transform (fade up, mask reveal or blur in), add a moving background made from gradients, and stagger the subhead and button by about 100ms. Snippets like our Spotlight Text Reveal and Spotlight Background are ready to copy.
How do I add a 3D globe to my hero section?
Use COBE, a roughly 5KB WebGL globe library, or Magic UI's Globe component, which wraps it for React. For data-driven globes like GitHub's, three.js with an InstancedMesh is the route GitHub's engineering team describes.
Should hero videos autoplay?
Muted autoplay is common, but give users a pause button: WCAG 2.2.2 requires a way to pause, stop or hide moving content that starts automatically and lasts more than five seconds. Always provide a poster image for slow connections.