Antigravity Animation
Antigravity Animation is a scroll animation in the UI HUB scroll animations collection. A 700vh scroll rig: a sticky 100vh .stage carries a framed quote hero, a six-layer SVG bell-glow, a black takeover section and a static loop copy.
The component is driven by 3 documented props (compact, showDemoButton, className), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: sticky positioning with overflow:hidden stage; SVG getTotalLength/getPointAtLength path math from a rAF loop; CSS container queries and cqw units.
Preview the scroll animation in the browser above, copy the source, and paste it into your project. Scroll Animations components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Antigravity Animation?
A scroll-driven longevity timeline: a framed quote hero exits as a six-layer bell-curve glow swallows the screen into a black section, where a milestone SVG path draws itself under a scrolling camera and the sequence loops seamlessly back to the start.
Antigravity Animation at a glance
- Category
- Scroll Animations
- Pricing
- Pro component
- Libraries
- React, react-router-dom and Lucide React
- Styling
- Tailwind CSS
- Configurable props
- 3
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Antigravity Animation works
A 700vh scroll rig: a sticky 100vh .stage carries a framed quote hero, a six-layer SVG bell-glow, a black takeover section and a static loop copy. A vanilla requestAnimationFrame engine lerps the raw scroll fraction toward its target at 0.12 per frame, maps it to sequence progress p = clamp(s*T/(T-1)) and loop-reveal progress rv = clamp(s*T-(T-1)) with T = runwayHeight/viewHeight - 1, and writes inline styles per frame. Chapter 1 (p 0.02-0.12): the hero exits with -120px rise, 0.96 scale and eased fade. Chapter 2 (p 0-0.32): a bellPath math helper generates six nested bell curves (cream/yellow/amber/orange/red/black) whose width, height and exponent morph with g = ramp(p,0,0.3)^1.25 so the glow grows from a thin bottom rim to a full dome, a black veil fades in behind it, and the nav flips .dark. Chapter 3 (p 0.26-1): the black section's headline focuses from 15% opacity / 6px blur / +30px, a winding SVG timeline path draws itself via strokeDashoffset with a 70px white leading tip, the camera follows the drawing head (translate3d x/y + ±1.4° sine roll), five milestone cards positioned from getPointAtLength fade along the curve, and a side progress bar scaleY plus percent readout track the draw (world opacity fades out at p 0.95-1). The final screen slides a static copy of the opening frame up from below; hitting the bottom silently jumps the scroll to zero for an infinite loop, and wheel-up at the top jumps to the end first. Positions resolve through a --ag-vh pixel unit set from the view height; the 700px breakpoint is a container query on the root.
Technical information for Antigravity Animation
| Category | Scroll Animations |
|---|---|
| Libraries | React, react-router-dom and Lucide React |
| Styling | Tailwind CSS |
| Rendering | CSS filters |
| State change | opening frame: framed quote card with corner ticks and side rules on white, ink nav to loop frame: white opening copy revealed over the finished timeline with the nav back to light |
| Props | 3 configurable |
| Usage example | Included on this page |
What Antigravity Animation requires
- sticky positioning with overflow:hidden stage
- SVG getTotalLength/getPointAtLength path math from a rAF loop
- CSS container queries and cqw units
- CSS custom property (--ag-vh) writes on resize
- wheel + scroll listeners with reverse-jump loop logic
- prefers-reduced-motion matchMedia static frame
- Google Fonts (Inter Tight, JetBrains Mono) via CSS @import
How to use Antigravity Animation
- Install the dependencies: npm install react-router-dom and npm install lucide-react.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <AntigravityAnimation /> in your page using that import path.
- Pass any of the 3 documented props to change colours, density, speed or behaviour.
Antigravity Animation questions
What is Antigravity Animation?
A scroll-driven longevity timeline: a framed quote hero exits as a six-layer bell-curve glow swallows the screen into a black section, where a milestone SVG path draws itself under a scrolling camera and the sequence loops seamlessly back to the start.
How does Antigravity Animation work?
A 700vh scroll rig: a sticky 100vh .stage carries a framed quote hero, a six-layer SVG bell-glow, a black takeover section and a static loop copy. A vanilla requestAnimationFrame engine lerps the raw scroll fraction toward its target at 0.12 per frame, maps it to sequence progress p = clamp(s*T/(T-1)) and loop-reveal progress rv = clamp(s*T-(T-1)) with T = runwayHeight/viewHeight - 1, and writes inline styles per frame. Chapter 1 (p 0.02-0.12): the hero exits with -120px rise, 0.96 scale and eased fade. Chapter 2 (p 0-0.32): a bellPath math helper generates six nested bell curves (cream/yellow/amber/orange/red/black) whose width, height and exponent morph with g = ramp(p,0,0.3)^1.25 so the glow grows from a thin bottom rim to a full dome, a black veil fades in behind it, and the nav flips .dark. Chapter 3 (p 0.26-1): the black section's headline focuses from 15% opacity / 6px blur / +30px, a winding SVG timeline path draws itself via strokeDashoffset with a 70px white leading tip, the camera follows the drawing head (translate3d x/y + ±1.4° sine roll), five milestone cards positioned from getPointAtLength fade along the curve, and a side progress bar scaleY plus percent readout track the draw (world opacity fades out at p 0.95-1). The final screen slides a static copy of the opening frame up from below; hitting the bottom silently jumps the scroll to zero for an infinite loop, and wheel-up at the top jumps to the end first. Positions resolve through a --ag-vh pixel unit set from the view height; the 700px breakpoint is a container query on the root.
Which category does Antigravity Animation belong to?
Antigravity Animation is listed under Scroll Animations in the UI HUB catalog. Scroll-linked animation components: parallax layers, pinned and sticky sections, scroll-triggered reveals, expanding scroll panels and 3D scroll transitions. Each one documents whether it uses native scroll timelines or a motion library, which matters for performance on long pages. Load them per section rather than across a whole route.
What does the compact prop do in Antigravity Animation?
Preview mode: the stage fills its container and the whole sequence scrubs against an inner scroll column (the .ag-shell element) instead of the window, with --ag-vh derived from the container height. It defaults to false.
What does the showDemoButton prop do in Antigravity Animation?
In compact mode, overlay a Live Demo pill that links to the full-screen demo page. It defaults to false.
Is Antigravity Animation free to use?
Antigravity Animation is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Antigravity Animation use?
Antigravity Animation uses React, react-router-dom and Lucide React and is styled with Tailwind CSS.
What does Antigravity Animation need to run?
Antigravity Animation needs sticky positioning with overflow:hidden stage, SVG getTotalLength/getPointAtLength path math from a rAF loop, CSS container queries and cqw units and CSS custom property (--ag-vh) writes on resize.