Inflate

$ pnpm dlx shadcn@latest add @remocn/inflate

Usage

Inflate draws its own mark: a glossy rounded square with a dot in the middle. It starts as a flat, deflated sliver, then puffs up on an underdamped spring, overshoots, squashes wide and rings out like a balloon. As it fills, the corners tighten from a pill to a rounded square and a specular highlight and inner shadow fade in. The dot pops in last, then the mark slides left while your wordmark wipes in on its right.

import { Inflate } from "@/components/remocn/inflate";
 
export const LogoSting = () => (
  <Inflate color="#E5322D" dotColor="#111111">
    <span
      style={{
        fontSize: 104,
        fontWeight: 800,
        letterSpacing: "-0.04em",
        color: "#FFFFFF",
      }}
    >
      remocn
    </span>
  </Inflate>
);

Pass only the wordmark as children. Without children the mark stays centered and no slide happens. The mark is 22% of the shorter side of the composition (158px at 720p); the wordmark keeps its own size.

Timing

At 30 fps and speed={1}:

The docs preview runs 66 frames. speed scales the timeline.