Long Shadow

$ pnpm dlx shadcn@latest add @remocn/long-shadow

Usage

LongShadow is a full-frame scene. The icon springs in from nothing at the center of the frame. Its shadow grows out of it until it reaches the frame edge, a solid band the exact shape of the icon's silhouette. Then the light swings, and the shadow sweeps from angleFrom to angleTo on a soft spring that overshoots a little before it settles.

import { LongShadow } from "@/components/remocn/long-shadow";
 
export const Done = () => <LongShadow />;

Without children it shows a red check badge. Pass a flat icon or mark as children to cast its shadow instead. The children are centered, and the shadow is built from their alpha, so any opaque shape works: an SVG, an image with transparency or plain text.

import { LongShadow } from "@/components/remocn/long-shadow";
 
export const AppIcon = () => (
  <LongShadow
    angleFrom={30}
    angleTo={150}
    shadowColor="#1F4FD1"
    background="#2D6BE5"
    fade={0.6}
  >
    <div
      style={{
        width: 240,
        height: 240,
        borderRadius: 56,
        background: "#FFFFFF",
      }}
    />
  </LongShadow>
);

Angles are in degrees, clockwise from the right: 0 casts the shadow to the right and 90 casts it down. fade fades the shadow toward its far end, from 0 for a solid band to 1 for a shadow that disappears at the edge.

Timing

At 30 fps and speed={1}:

longShadowLength is 48, the frame the swing settles. speed scales the whole timeline.

Notes

The shadow is an SVG filter that stacks 1023 offset copies of the silhouette in ten doubling passes, then softens the steps with a hair of blur. It covers the full frame, so expect slower renders than a plain scene, especially at 4K.