Ellipsis Resolve
Three pulsing dots resolve into a gradient word and a closing period.
Installation
$ pnpm dlx shadcn@latest add @remocn/ellipsis-resolveUsage
tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EllipsisResolve } from "@/components/remocn/ellipsis-resolve";
const EllipsisResolveScene = () => (
<EllipsisResolve word="Shipped" accent="#3B5BFD" />
);
export const RemotionRoot = () => (
<Composition
id="EllipsisResolve"
component={EllipsisResolveScene}
durationInFrames={131}
fps={30}
width={1280}
height={720}
/>
);Three dots pulse in turn, stretch apart, and a gradient sweep turns them into the letters of the word, ending on a period. Pass word to set the result; it ships light and dark through theme.
Props4
| Prop | Type | Default |
|---|---|---|
| word | string"Shipped" Word the three dots resolve into | |
| accent | string"#3B5BFD" Accent color (any valid CSS color) | |
| theme | "dark" | "light""dark" Ships light and dark palettes | |
| speed | number1 Playback speed multiplier | |
- wordstring
Word the three dots resolve into
Default
"Shipped" - accentstring
Accent color (any valid CSS color)
Default
"#3B5BFD" - theme"dark" | "light"
Ships light and dark palettes
Default
"dark" - speednumber
Playback speed multiplier
Default
1