Sheen Slide In
A title glides in from the right with a long settle while a gradient sheen sweeps through the glyphs
Installation
$ pnpm dlx shadcn@latest add @remocn/sheen-slide-inUsage
The title enters from the right at peak velocity and settles as a sum of two exponentials — a fast settle (τ ≈ 2.5 frames) plus a slow creep (τ ≈ 12 frames) that eases it into exact center. The sheen starts moving with the text on frame 0 and sweeps left-to-right through the glyphs on an ease-in-out over 48 frames — gaining speed while the text sheds it — then cools down by frame 58. At exitAt the title shrinks to 0.9 over four frames at full opacity and vanishes with a hard cut. All timings were measured frame-by-frame from the reference footage.
// src/Root.tsx
import { Composition } from "remotion";
import { SheenSlideIn } from "@/components/remocn/sheen-slide-in";
const SheenSlideInScene = () => <SheenSlideIn text="Introducing" />;
export const RemotionRoot = () => (
<Composition
id="SheenSlideIn"
component={SheenSlideInScene}
durationInFrames={70}
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.
import { Composition } from "remotion";
import { SheenSlideIn } from "@/components/remocn/sheen-slide-in";
import { Backdrop } from "@/components/remocn/backdrop";
const SheenSlideInScene = () => (
<Backdrop fill={{ type: "color", value: "#ffffff" }}>
<SheenSlideIn text="Introducing" />
</Backdrop>
);
export const RemotionRoot = () => (
<Composition
id="SheenSlideIn"
component={SheenSlideInScene}
durationInFrames={70}
fps={30}
width={1280}
height={720}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | — | The title text |
exitAt | number | 60 | Frame at which the title shrinks to 0.9 and hard-cuts away |
fontSize | number | 72 | Font size in pixels; travel distances scale with it |
baseColor | string | "#18181b" | Resting text color |
sheenColor | string | "#4f8ef7" | Color of the gradient highlight sweeping through the glyphs |
fontWeight | number | 400 | CSS font-weight |
className | string | — | Optional className passed to the underlying span |