Inline Highlight

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface InlineHighlightProps {
7  before: string;
8  highlight: string;
9  after?: string;
10  baseColor?: string;
11  highlightColor?: string;
12  fontSize?: number;
13  fontWeight?: number;
14  speed?: number;
15  fps?: number;
16  durationInFrames?: number;
17  background?: string;
18  className?: string;
19}
20 
21export const InlineHighlight = ({
22  before,
23  highlight,
24  after = "",
25  baseColor = "#171717",
26  highlightColor = "#ff5e3a",
27  fontSize = 48,
28  fontWeight = 600,
29  speed = 1,
30  fps = 30,
31  durationInFrames = 90,
32  background = "white",
33  className,
34}: InlineHighlightProps) => {
35  const safeSpeed = Math.max(0.01, speed);
36  const durationMs = (durationInFrames / fps) * 1000;
37  const highlightDurationMs =
38    (((durationInFrames * 0.5) / fps) * 1000) / safeSpeed;
39 
40  const containerStyle: CSSProperties = {
41    alignItems: "center",
42    background,
43    display: "flex",
44    height: 500,
45    justifyContent: "center",
46    position: "relative",
47    width: 1000,
48  };
49 
50  return (
51    <Timegroup
52      className={className}
53      duration={`${durationMs}ms`}
54      mode="fixed"
55      style={containerStyle}
56    >
57      <>
58        <style>{`
59          @keyframes framecn-inline-highlight {
60            from {
61              color: ${baseColor};
62            }
63            to {
64              color: ${highlightColor};
65            }
66          }
67        `}</style>
68        <span
69          style={{
70            animation: `framecn-inline-highlight ${highlightDurationMs}ms ease-out ${durationMs - highlightDurationMs}ms forwards`,
71            fontFamily:
72              "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
73            fontSize,
74            fontWeight,
75            letterSpacing: "-0.03em",
76          }}
77        >
78          {before}
79          <span style={{ color: highlightColor }}>{highlight}</span>
80          {after}
81        </span>
82      </>
83    </Timegroup>
84  );
85};