---
title: "Speed ramp animated icon"
description: "Speed ramp animated icon (Video editing). The speed ramps up. Light: the bead rides the speed curve from slow to fast, picking up speed all the way, and slams into the top, where it is knocked back a little down the curve and seats. Strong: it backs off and hesitates, then takes the ramp much harder (the speed builds faster), slams into the top and is knocked back twice in decaying beats. The bead stays at the top. The preview reset fades it back to the prepared pose. The curve and the clip never move."
canonical: https://generativeicons.com/icons/speed-ramp/
---

# Speed ramp animated icon

The speed ramps up. Light: the bead rides the speed curve from slow to fast, picking up speed all the way, and slams into the top, where it is knocked back a little down the curve and seats. Strong: it backs off and hesitates, then takes the ramp much harder (the speed builds faster), slams into the top and is knocked back twice in decaying beats. The bead stays at the top. The preview reset fades it back to the prepared pose. The curve and the clip never move.

- Id: `speed-ramp`
- Category: Video editing
- Search terms: slow motion, slow mo, slowmo, time remap, time remapping, speed up, speed curve, playback speed, variable speed, acceleration, velocity
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/speed-ramp.lottie (dotLottie, 5728 bytes, sha256 6f81629e93762560d5886898cea195a80b565ee77690d5aaffea491a2171eaa1)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add speed-ramp
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/speed-ramp.mjs';

export function SpeedRampIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/speed-ramp.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/speed-ramp/ · https://generativeicons.com/api/icons/speed-ramp