remocn ✕ react-bits — New sponsor

1import React from "react";
2import { AbsoluteFill, Easing, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { demoAsset } from "@/lib/demo-assets";
4import { TransitionSeries, linearTiming } from "@remotion/transitions";
5import { loadFont as loadSans } from "@remotion/google-fonts/Manrope";
6 
7import { ShaderDithering } from "@/components/remocn/shader-dithering";
8import { pushThrough } from "@/components/remocn/push-through";
9import { focusPull } from "@/components/remocn/focus-pull";
10 
11// react-bits speaks in motion, we speak in Manrope — normal weight only.
12const { fontFamily: SANS_FAMILY } = loadSans("normal", {
13  subsets: ["latin"],
14  weights: ["400"],
15});
16 
17const SANS = `${SANS_FAMILY}, -apple-system, BlinkMacSystemFont, sans-serif`;
18 
19// Palette lifted from reactbits.dev itself: #060010 is the landing body
20// background, #5227FF the signature accent used across the whole library.
21const BG = "#060010";
22const VIOLET = "#5227FF";
23const INK = "#fafafa";
24const MUTED = "rgba(250,250,250,0.6)";
25const FAINT = "rgba(250,250,250,0.45)";
26 
27const clampOpts = {
28  extrapolateLeft: "clamp" as const,
29  extrapolateRight: "clamp" as const,
30};
31 
32// ---------------------------------------------------------------------------
33// Scene timings (frames @ 30fps). Transitions overlap.
34// ---------------------------------------------------------------------------
35const S_HOOK = 70; //    per-word kinetic hook
36const S_REVEAL = 95; //  react-bits wordmark reveal + tagline
37const S_COUNT = 60; //   130 count-up
38const S_LOCKUP = 125; // Remocn ✕ react bits + reactbits.dev
39 
40// The tagline, cut into rhythmic beats — each word is its own hard-cut scene.
41const BEAT_WORDS = [
42  "Free",
43  "Customizable",
44  "Animations for",
45  "Text",
46  "Backgrounds",
47  "UI",
48];
49const BEAT_DURS = [14, 14, 16, 12, 12, 22]; // accelerating into the tail
50const S_BEATS = BEAT_DURS.reduce((a, b) => a + b, 0);
51 
52const T_PT = 18; // push-through
53const T_FP = 18; // focus-pull
54 
55export const SPONSOR_REACTBITS_DURATION =
56  S_HOOK + S_REVEAL + S_COUNT + S_BEATS + S_LOCKUP - (T_PT + T_FP + T_PT);
57 
58// ---------------------------------------------------------------------------
59// Slow camera drift — every scene rides a barely-there push-in so no frame
60// is ever static. durationInFrames is Sequence-scoped inside TransitionSeries.
61// ---------------------------------------------------------------------------
62const Drift: React.FC<{ children: React.ReactNode; grow?: number }> = ({
63// … truncated