This component no longer exists. It was in remotionui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-11 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
blur-focus-in
remotionui/blur-focus-inRemovedComponent
Text fades from heavy blur into sharp focus
Live preview
live · rendered by the registry
Rendered by remotionui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://remotionui.com/r/blur-focus-in.jsonSource
1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";2import { scaleFont } from "@/remotion/lib/layout";3import { EASING_ENTER } from "@/remotion/lib/timing";45export type BlurFocusInProps = {6 text: string;7 durationInFrames?: number;8 delayInFrames?: number;9 maxBlur?: number;10 fontSize?: number;11 color?: string;12 fontWeight?: number;13 fontFamily?: string;14};1516export const BlurFocusIn: React.FC<BlurFocusInProps> = ({17 text,18 durationInFrames = 36,19 delayInFrames = 0,20 maxBlur = 18,21 fontSize: fontSizeProp,22 color = "#f4f4f5",23 fontWeight = 600,24 fontFamily,25}) => {26 const frame = useCurrentFrame();27 const { width } = useVideoConfig();28 const fontSize = fontSizeProp ?? scaleFont(84, width);29 const progress = interpolate(30 frame,31 [delayInFrames, delayInFrames + durationInFrames],32 [0, 1],33 {34 easing: EASING_ENTER,35 extrapolateLeft: "clamp",36 extrapolateRight: "clamp",37 },38 );39 const blur = interpolate(progress, [0, 1], [maxBlur, 0]);40 const opacity = interpolate(progress, [0, 0.35, 1], [0, 0.72, 1]);4142 return (43 <span44 style={{45 fontSize,46 fontWeight,47 color,48 lineHeight: 1.15,49 opacity,50 filter: `blur(${blur}px)`,51 ...(fontFamily ? { fontFamily } : {}),52 }}53 >54 {text}55 </span>56 );57};
