Per Character Rise
Letters slide up from below with no blur - crisp and kinetic
Installation
$ pnpm dlx shadcn@latest add @remocn/per-character-riseUsage
tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PerCharacterRise } from "@/components/remocn/per-character-rise";
const PerCharacterRiseScene = () => (
<PerCharacterRise text="One more thing." distance={32} fontSize={72} />
);
export const RemotionRoot = () => (
<Composition
id="PerCharacterRise"
component={PerCharacterRiseScene}
durationInFrames={60}
fps={30}
width={1280}
height={720}
/>
);With Backdrop
The component renders transparent — supply the background via Backdrop. It ships single-theme; edit the copied file to re-theme colors.
Pair with Backdrop to place the text inside a full-frame fill with a rounded, shadowed content frame:
tsx
import { Composition } from "remotion";
import { PerCharacterRise } from "@/components/remocn/per-character-rise";
import { Backdrop } from "@/components/remocn/backdrop";
const PerCharacterRiseScene = () => (
<Backdrop fill={{ type: "color", value: "#ffffff" }}>
<PerCharacterRise text="One more thing." distance={32} fontSize={72} />
</Backdrop>
);
export const RemotionRoot = () => (
<Composition
id="PerCharacterRise"
component={PerCharacterRiseScene}
durationInFrames={60}
fps={30}
width={1280}
height={720}
/>
);Props6
| Prop | Type | Default |
|---|---|---|
| textrequired | string— The text to reveal | |
| distance | number32 Vertical travel in pixels each character rises from. Animates to 0. | |
| fontSize | number72 Font size in pixels | |
| fontWeight | number600 CSS font-weight | |
| color | string"#171717" Text color (any valid CSS color) | |
| className | string— Optional className passed to the underlying span | |
- textrequiredstring
The text to reveal
- distancenumber
Vertical travel in pixels each character rises from. Animates to 0.
Default
32 - fontSizenumber
Font size in pixels
Default
72 - fontWeightnumber
CSS font-weight
Default
600 - colorstring
Text color (any valid CSS color)
Default
"#171717" - classNamestring
Optional className passed to the underlying span