UI Caret

1"use client";
2 
3import type { CSSProperties } from "react";
4import { useCurrentFrame, useVideoConfig } from "remotion";
5 
6export interface CaretProps {
7  color?: string;
8  width?: number;
9  height?: number;
10  radius?: number;
11  opacity?: number;
12  blink?: boolean;
13  blinkPerSecond?: number;
14  speed?: number;
15  marginLeft?: number;
16  className?: string;
17  style?: CSSProperties;
18}
19 
20export function caretBlinkOpacity(
21  frame: number,
22  opts: { fps: number; blinkPerSecond: number; speed: number },
23): number {
24  const cycles = opts.blinkPerSecond <= 0 ? 1 : opts.blinkPerSecond;
25  const halfPeriod = opts.fps / cycles / 2;
26  if (halfPeriod <= 0) return 1;
27  return Math.floor((frame * opts.speed) / halfPeriod) % 2 === 0 ? 1 : 0;
28}
29 
30export function Caret({
31  color = "currentColor",
32  width = 2,
33  height = 18,
34  radius = 1,
35  opacity,
36  blink = false,
37  blinkPerSecond = 1,
38  speed = 1,
39  marginLeft = 0,
40  className,
41  style,
42}: CaretProps) {
43  const frame = useCurrentFrame();
44  const { fps } = useVideoConfig();
45 
46  const resolvedOpacity =
47    opacity !== undefined
48      ? opacity
49      : blink
50        ? caretBlinkOpacity(frame, { fps, blinkPerSecond, speed })
51        : 1;
52 
53  return (
54    <span
55      className={className}
56      style={{
57        display: "inline-block",
58        flexShrink: 0,
59        width,
60        height,
61        borderRadius: radius,
62        background: color,
63        opacity: resolvedOpacity,
64        marginLeft,
65        ...style,
66      }}
67    />
68  );
69}