Add border animation

Author: istarkov

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx

@@ -11,8 +11,6 @@ const borderColor = "#ccc";
 const Wrapper = styled(Box, {
   position: "relative",
   alignSelf: "stretch",
-  // borderRight: `1px solid ${borderColor}`,
-  // borderLeft: `1px solid ${borderColor}`,
 });
 
 const InsetLine = styled(Box, {
@@ -34,8 +32,8 @@ const Scrollable = styled(Box, {
 });
 
 const bgKeyframes = keyframes({
-  "0%": { backgroundColor: "oklch(54.6% 0.245 262.881)" },
-  "100%": { backgroundColor: "oklch(58.6% 0.253 17.585)" },
+  "0%": { "--progress": "0" },
+  "100%": { "--progress": "360" },
 });
 
 const rafInterval = (callback: () => void): (() => void) => {
@@ -58,6 +56,17 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
   const subjectRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    try {
+      CSS.registerProperty({
+        name: "--progress",
+        syntax: "<number>",
+        inherits: true,
+        initialValue: "0",
+      });
+    } catch {
+      /* */
+    }
+
     const scrollable = scrollableRef.current;
     const subject = subjectRef.current;
 
@@ -78,12 +87,12 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
       const timeDelta = Date.now() - startTime;
 
       scrollable.scrollTop =
-        (Math.sin(timeDelta / 500) * (scrollHeight - clientHeight)) / 2 +
+        (Math.sin(timeDelta / 1000) * (scrollHeight - clientHeight)) / 2 +
         (scrollHeight - clientHeight) / 2;
 
       const progress =
-        subject.getAnimations()?.[0]?.effect?.getComputedTiming()?.progress ??
-        0;
+        subject.parentElement?.getAnimations()?.[0]?.effect?.getComputedTiming()
+          ?.progress ?? 0;
 
       const content = `${(progress * 100).toFixed(0)}%`;
 
@@ -110,6 +119,8 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
     },
   ];
 
+  const progressRadius = "6px";
+
   return (
     <Wrapper>
       <Scrollable ref={scrollableRef}>
@@ -119,21 +130,10 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
           }}
         />
         <Box
-          ref={subjectRef}
           css={{
             height: insetSize,
             marginLeft: 4,
             marginRight: 4,
-            // border: `1px solid ${borderColor}`,
-
-            color: "white",
-            fontSize: "12px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            whiteSpace: "pre",
-            textAlign: "center",
-            fontFamily: theme.fonts.robotoMono,
 
             animationName: `${bgKeyframes}`,
             animationTimingFunction: "linear",
@@ -142,8 +142,40 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
             animationRangeStart: `${rangeStart[0]} ${toValue(rangeStart[1])}`,
             animationRangeEnd: `${rangeEnd[0]} ${toValue(rangeEnd[1])}`,
             animationTimeline: `view(y ${insetSize})`,
+
+            position: "relative",
+            borderRadius: progressRadius,
           }}
-        />
+        >
+          <Box
+            css={{
+              position: "absolute",
+              inset: 0,
+              borderRadius: progressRadius,
+
+              background: `conic-gradient(oklch(54.6% 0.245 262.881) calc(var(--progress, 0) * 1deg), oklch(92.9% 0.013 255.508) 0)`,
+              mask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+
+              maskComposite: `exclude`,
+              padding: `4px`,
+            }}
+          />
+
+          <Box
+            ref={subjectRef}
+            css={{
+              position: "absolute",
+              inset: 0,
+              fontSize: "12px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              whiteSpace: "pre",
+              textAlign: "center",
+              fontFamily: theme.fonts.robotoMono,
+            }}
+          ></Box>
+        </Box>
         <Box
           css={{
             height: `calc(100% - ${insetSize})`,