Skeleton Block

A single shimmer placeholder rectangle whose highlight sweep is a pure function of the frame

The motion atom underneath skeleton. A directional highlight gradient sweeps across the block deterministically from useCurrentFrame() and loops seamlessly, so any number of blocks stay in phase without coordination.

Unlike most primitives in this tier it has no state — it is always shimmering. Reach for it when you are laying out a placeholder yourself; reach for skeleton when you want the loading-to-loaded crossfade handled for you.

Installation

$ pnpm dlx shadcn@latest add @remocn/skeleton-block

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SkeletonBlock } from "@/components/remocn/skeleton-block";
 
const LoadingCard = () => (
  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
    <SkeletonBlock width={240} height={20} radius={4} />
    <SkeletonBlock width={180} height={16} />
    <SkeletonBlock width={200} height={16} />
  </div>
);
 
export const RemotionRoot = () => (
  <Composition
    id="SkeletonBlock"
    component={LoadingCard}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The sweep loops, so durationInFrames only needs to cover as long as you want the placeholder on screen — there is no entrance or exit to budget for.

Inside a flex row

width accepts a string, so a block can fill remaining space. Pair it with flexShrink when a fixed-width block sits next to a flexible one.

tsx

<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
  <SkeletonBlock width={40} height={40} radius={20} flexShrink={0} />
  <SkeletonBlock width="100%" height={16} />
</div>

Props8

Prop	Type	Default
width	number \| string120 Block width. A number is pixels; a string passes through as a CSS width, so "100%" fills the container.
height	number16 Block height in pixels.
radius	number6 Corner radius in pixels. Match half the height for a pill or avatar circle.
speed	number1 Time multiplier for the highlight sweep, applied as frame × speed.
baseColor	string— Base fill of the block. Falls back to the resolved theme's muted surface.
highlightColor	string— Color of the sweeping highlight. Falls back to the resolved theme.
flexShrink	number— CSS flex-shrink on the block. Set to 0 to stop a fixed-width block collapsing inside a flex row.
className	string— Optional className passed to the block element.

widthnumber | string
Block width. A number is pixels; a string passes through as a CSS width, so "100%" fills the container.
Default120
heightnumber
Block height in pixels.
Default16
radiusnumber
Corner radius in pixels. Match half the height for a pill or avatar circle.
Default6
speednumber
Time multiplier for the highlight sweep, applied as frame × speed.
Default1
baseColorstring
Base fill of the block. Falls back to the resolved theme's muted surface.
highlightColorstring
Color of the sweeping highlight. Falls back to the resolved theme.
flexShrinknumber
CSS flex-shrink on the block. Set to 0 to stop a fixed-width block collapsing inside a flex row.
classNamestring
Optional className passed to the block element.