Ellipsis Resolve

Three pulsing dots resolve into a gradient word and a closing period.

Installation
$ pnpm dlx shadcn@latest add @remocn/ellipsis-resolve

Usage

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

PropTypeDefault
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

    Default1