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-in

Usage

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.

tsx

// 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.

tsx

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}
  />
);

Props7

Prop	Type	Default
textrequired	string— The title text
exitAt	number60 Frame at which the title shrinks to 0.9 and hard-cuts away
fontSize	number72 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	number400 CSS font-weight
className	string— Optional className passed to the underlying span

textrequiredstring
The title text
exitAtnumber
Frame at which the title shrinks to 0.9 and hard-cuts away
Default60
fontSizenumber
Font size in pixels; travel distances scale with it
Default72
baseColorstring
Resting text color
Default"#18181b"
sheenColorstring
Color of the gradient highlight sweeping through the glyphs
Default"#4f8ef7"
fontWeightnumber
CSS font-weight
Default400
classNamestring
Optional className passed to the underlying span