@unif/react-native-design 0.31.1 → 0.31.2

package/lib/module/components/ui/BorderBeam/BorderBeam.js

@@ -7,7 +7,7 @@ import Svg, { Rect } from 'react-native-svg';
 import { radius, useColors, usePrefersReducedMotion } from "../../../theme/index.js";
 import { A11Y_HIDDEN_PROPS } from "../shared/a11y.js";
 import { normalizeBorderBeam } from "./normalizeBorderBeam.js";
-import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from "./shared.js";
+import { borderBeamGeometry, borderBeamTrail, EMPTY_BORDER_BEAM_LAYOUT } from "./shared.js";
 import { styles } from "./styles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
@@ -42,6 +42,7 @@ export function BorderBeam({
     layout,
     ...normalized
   });
+  const trail = borderBeamTrail(geometry.beamLength);
   const dashOffset = useSharedValue(0);
   const showVisual = active && !reducedMotion && geometry.perimeter > 0;
   useEffect(() => {
@@ -79,7 +80,7 @@ export function BorderBeam({
       children: /*#__PURE__*/_jsx(Svg, {
         width: layout.width,
         height: layout.height,
-        children: /*#__PURE__*/_jsx(AnimatedRect, {
+        children: trail.map(layer => /*#__PURE__*/_jsx(AnimatedRect, {
           animatedProps: animatedProps,
           x: normalized.lineWidth / 2,
           y: normalized.lineWidth / 2,
@@ -89,10 +90,11 @@ export function BorderBeam({
           ry: geometry.radius,
           fill: "none",
           stroke: color ?? colors.primary,
+          strokeOpacity: layer.opacity,
           strokeWidth: normalized.lineWidth,
           strokeLinecap: "round",
-          strokeDasharray: [geometry.beamLength, Math.max(0, geometry.perimeter - geometry.beamLength)]
-        })
+          strokeDasharray: [layer.length, Math.max(0, geometry.perimeter - layer.length)]
+        }, `${layer.length}-${layer.opacity}`))
       })
     }) : null]
   });

package/lib/module/components/ui/BorderBeam/BorderBeam.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","View","Animated","cancelAnimation","Easing","ReduceMotion","useAnimatedProps","useSharedValue","withRepeat","withTiming","Svg","Rect","radius","useColors","usePrefersReducedMotion","A11Y_HIDDEN_PROPS","normalizeBorderBeam","borderBeamGeometry","EMPTY_BORDER_BEAM_LAYOUT","styles","jsx","_jsx","jsxs","_jsxs","AnimatedRect","createAnimatedComponent","BorderBeam","children","active","color","duration","lineWidth","size","borderRadius","md","style","testID","colors","reducedMotion","layout","setLayout","normalized","geometry","dashOffset","showVisual","perimeter","value","easing","linear","reduceMotion","System","undefined","animatedProps","strokeDashoffset","handleLayout","event","width","Math","max","nativeEvent","height","current","onLayout","container","pointerEvents","visual","x","y","rectWidth","rectHeight","rx","ry","fill","stroke","primary","strokeWidth","strokeLinecap","strokeDasharray","beamLength"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/BorderBeam.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","View","Animated","cancelAnimation","Easing","ReduceMotion","useAnimatedProps","useSharedValue","withRepeat","withTiming","Svg","Rect","radius","useColors","usePrefersReducedMotion","A11Y_HIDDEN_PROPS","normalizeBorderBeam","borderBeamGeometry","borderBeamTrail","EMPTY_BORDER_BEAM_LAYOUT","styles","jsx","_jsx","jsxs","_jsxs","AnimatedRect","createAnimatedComponent","BorderBeam","children","active","color","duration","lineWidth","size","borderRadius","md","style","testID","colors","reducedMotion","layout","setLayout","normalized","geometry","trail","beamLength","dashOffset","showVisual","perimeter","value","easing","linear","reduceMotion","System","undefined","animatedProps","strokeDashoffset","handleLayout","event","width","Math","max","nativeEvent","height","current","onLayout","container","pointerEvents","visual","map","layer","x","y","rectWidth","rectHeight","rx","ry","fill","stroke","primary","strokeOpacity","opacity","strokeWidth","strokeLinecap","strokeDasharray","length"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/BorderBeam.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/BorderBeam.web.js

@@ -6,7 +6,7 @@ import Svg, { Rect } from 'react-native-svg';
 import { radius, useColors, usePrefersReducedMotion } from "../../../theme/index.js";
 import { A11Y_HIDDEN_PROPS } from "../shared/a11y.js";
 import { normalizeBorderBeam } from "./normalizeBorderBeam.js";
-import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from "./shared.js";
+import { borderBeamGeometry, borderBeamTrail, EMPTY_BORDER_BEAM_LAYOUT } from "./shared.js";
 import { styles } from "./styles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const KEYFRAMES_ID = 'unif-border-beam-keyframes';
@@ -35,7 +35,7 @@ export function BorderBeam({
   const colors = useColors();
   const reducedMotion = usePrefersReducedMotion();
   const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
-  const rectRef = useRef(null);
+  const rectRefs = useRef([]);
   const normalized = normalizeBorderBeam({
     duration,
     lineWidth,
@@ -46,16 +46,21 @@ export function BorderBeam({
     layout,
     ...normalized
   });
+  const trail = borderBeamTrail(geometry.beamLength);
   const showVisual = active && !reducedMotion && geometry.perimeter > 0;
   useEffect(() => {
     if (!showVisual) return;
     ensureKeyframes();
-    const node = rectRef.current;
-    if (!node?.style) return;
-    node.style.setProperty('--unif-border-beam-path', `${geometry.perimeter}px`);
-    node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
+    const nodes = rectRefs.current.filter(node => node?.style);
+    if (nodes.length === 0) return;
+    nodes.forEach(node => {
+      node.style.setProperty('--unif-border-beam-path', `${geometry.perimeter}px`);
+      node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
+    });
     return () => {
-      node.style.animation = '';
+      nodes.forEach(node => {
+        node.style.animation = '';
+      });
     };
   }, [geometry.perimeter, normalized.duration, showVisual]);
   const handleLayout = event => {
@@ -79,8 +84,10 @@ export function BorderBeam({
       children: /*#__PURE__*/_jsx(Svg, {
         width: layout.width,
         height: layout.height,
-        children: /*#__PURE__*/_jsx(Rect, {
-          ref: rectRef,
+        children: trail.map((layer, index) => /*#__PURE__*/_jsx(Rect, {
+          ref: node => {
+            rectRefs.current[index] = node;
+          },
           x: normalized.lineWidth / 2,
           y: normalized.lineWidth / 2,
           width: geometry.rectWidth,
@@ -89,10 +96,11 @@ export function BorderBeam({
           ry: geometry.radius,
           fill: "none",
           stroke: color ?? colors.primary,
+          strokeOpacity: layer.opacity,
           strokeWidth: normalized.lineWidth,
           strokeLinecap: "round",
-          strokeDasharray: [geometry.beamLength, Math.max(0, geometry.perimeter - geometry.beamLength)]
-        })
+          strokeDasharray: [layer.length, Math.max(0, geometry.perimeter - layer.length)]
+        }, `${layer.length}-${layer.opacity}`))
       })
     }) : null]
   });

package/lib/module/components/ui/BorderBeam/BorderBeam.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","View","Svg","Rect","radius","useColors","usePrefersReducedMotion","A11Y_HIDDEN_PROPS","normalizeBorderBeam","borderBeamGeometry","EMPTY_BORDER_BEAM_LAYOUT","styles","jsx","_jsx","jsxs","_jsxs","KEYFRAMES_ID","win","globalThis","ensureKeyframes","document","getElementById","sheet","createElement","id","textContent","head","appendChild","BorderBeam","children","active","color","duration","lineWidth","size","borderRadius","md","style","testID","colors","reducedMotion","layout","setLayout","rectRef","normalized","geometry","showVisual","perimeter","node","current","setProperty","animation","handleLayout","event","width","Math","max","nativeEvent","height","onLayout","container","pointerEvents","visual","ref","x","y","rectWidth","rectHeight","rx","ry","fill","stroke","primary","strokeWidth","strokeLinecap","strokeDasharray","beamLength"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/BorderBeam.web.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","useState","View","Svg","Rect","radius","useColors","usePrefersReducedMotion","A11Y_HIDDEN_PROPS","normalizeBorderBeam","borderBeamGeometry","borderBeamTrail","EMPTY_BORDER_BEAM_LAYOUT","styles","jsx","_jsx","jsxs","_jsxs","KEYFRAMES_ID","win","globalThis","ensureKeyframes","document","getElementById","sheet","createElement","id","textContent","head","appendChild","BorderBeam","children","active","color","duration","lineWidth","size","borderRadius","md","style","testID","colors","reducedMotion","layout","setLayout","rectRefs","normalized","geometry","trail","beamLength","showVisual","perimeter","nodes","current","filter","node","length","forEach","setProperty","animation","handleLayout","event","width","Math","max","nativeEvent","height","onLayout","container","pointerEvents","visual","map","layer","index","ref","x","y","rectWidth","rectHeight","rx","ry","fill","stroke","primary","strokeOpacity","opacity","strokeWidth","strokeLinecap","strokeDasharray"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/BorderBeam.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/shared.js

@@ -4,6 +4,36 @@ export const EMPTY_BORDER_BEAM_LAYOUT = {
   width: 0,
   height: 0
 };
+const BORDER_BEAM_TRAIL = [{
+  lengthRatio: 1,
+  opacity: 0.12
+}, {
+  lengthRatio: 0.75,
+  opacity: 0.24
+}, {
+  lengthRatio: 0.5,
+  opacity: 0.42
+}, {
+  lengthRatio: 0.25,
+  opacity: 0.88
+}];
+
+/**
+ * 把单色线段拆成由淡到亮的叠加尾迹。
+ *
+ * 所有层共享同一动画相位，较短且更亮的层叠在前端，形成接近渐变的彗星头；
+ * 同时避免 SVG gradient 在 Native/Web 上的实现差异。
+ */
+export function borderBeamTrail(beamLength) {
+  const safeLength = Math.max(0, beamLength);
+  return BORDER_BEAM_TRAIL.map(({
+    lengthRatio,
+    opacity
+  }) => ({
+    length: safeLength * lengthRatio,
+    opacity
+  }));
+}
 export function borderBeamGeometry(input) {
   const {
     layout,

package/lib/module/components/ui/BorderBeam/shared.js.map

@@ -1 +1 @@
-{"version":3,"names":["EMPTY_BORDER_BEAM_LAYOUT","width","height","borderBeamGeometry","input","layout","lineWidth","rectWidth","Math","max","rectHeight","perimeter","beamLength","min","size","radius","borderRadius"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/shared.ts"],"mappings":";;AAEA,OAAO,MAAMA,wBAA0C,GAAG;EACxDC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACV,CAAC;AAED,OAAO,SAASC,kBAAkBA,CAACC,KAKlC,EAAE;EACD,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAGF,KAAK;EACnC,MAAMG,SAAS,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,MAAM,CAACJ,KAAK,GAAGK,SAAS,CAAC;EACvD,MAAMI,UAAU,GAAGF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,MAAM,CAACH,MAAM,GAAGI,SAAS,CAAC;EACzD,MAAMK,SAAS,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAIF,SAAS,GAAGG,UAAU,CAAC,CAAC;EAC3D,MAAME,UAAU,GAAGJ,IAAI,CAACK,GAAG,CAACT,KAAK,CAACU,IAAI,EAAEH,SAAS,GAAG,CAAC,CAAC;EACtD,OAAO;IACLC,UAAU;IACVD,SAAS;IACTD,UAAU;IACVH,SAAS;IACTQ,MAAM,EAAEP,IAAI,CAACK,GAAG,CAACT,KAAK,CAACY,YAAY,EAAET,SAAS,GAAG,CAAC,EAAEG,UAAU,GAAG,CAAC;EACpE,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["EMPTY_BORDER_BEAM_LAYOUT","width","height","BORDER_BEAM_TRAIL","lengthRatio","opacity","borderBeamTrail","beamLength","safeLength","Math","max","map","length","borderBeamGeometry","input","layout","lineWidth","rectWidth","rectHeight","perimeter","min","size","radius","borderRadius"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/shared.ts"],"mappings":";;AAEA,OAAO,MAAMA,wBAA0C,GAAG;EACxDC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACV,CAAC;AAED,MAAMC,iBAAiB,GAAG,CACxB;EAAEC,WAAW,EAAE,CAAC;EAAEC,OAAO,EAAE;AAAK,CAAC,EACjC;EAAED,WAAW,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAK,CAAC,EACpC;EAAED,WAAW,EAAE,GAAG;EAAEC,OAAO,EAAE;AAAK,CAAC,EACnC;EAAED,WAAW,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAK,CAAC,CAC5B;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAACC,UAAkB,EAAE;EAClD,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,UAAU,CAAC;EAC1C,OAAOJ,iBAAiB,CAACQ,GAAG,CAAC,CAAC;IAAEP,WAAW;IAAEC;EAAQ,CAAC,MAAM;IAC1DO,MAAM,EAAEJ,UAAU,GAAGJ,WAAW;IAChCC;EACF,CAAC,CAAC,CAAC;AACL;AAEA,OAAO,SAASQ,kBAAkBA,CAACC,KAKlC,EAAE;EACD,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAGF,KAAK;EACnC,MAAMG,SAAS,GAAGR,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEK,MAAM,CAACd,KAAK,GAAGe,SAAS,CAAC;EACvD,MAAME,UAAU,GAAGT,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEK,MAAM,CAACb,MAAM,GAAGc,SAAS,CAAC;EACzD,MAAMG,SAAS,GAAGV,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAIO,SAAS,GAAGC,UAAU,CAAC,CAAC;EAC3D,MAAMX,UAAU,GAAGE,IAAI,CAACW,GAAG,CAACN,KAAK,CAACO,IAAI,EAAEF,SAAS,GAAG,CAAC,CAAC;EACtD,OAAO;IACLZ,UAAU;IACVY,SAAS;IACTD,UAAU;IACVD,SAAS;IACTK,MAAM,EAAEb,IAAI,CAACW,GAAG,CAACN,KAAK,CAACS,YAAY,EAAEN,SAAS,GAAG,CAAC,EAAEC,UAAU,GAAG,CAAC;EACpE,CAAC;AACH","ignoreList":[]}

package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BorderBeam.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmBnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiFrC"}
+{"version":3,"file":"BorderBeam.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuBnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsFrC"}

package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BorderBeam.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAe/C,sDAAsD;AACtD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2ErC"}
+{"version":3,"file":"BorderBeam.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAe/C,sDAAsD;AACtD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsFrC"}

package/lib/typescript/src/components/ui/BorderBeam/shared.d.ts

@@ -3,6 +3,16 @@ export type BorderBeamLayout = Readonly<{
     height: number;
 }>;
 export declare const EMPTY_BORDER_BEAM_LAYOUT: BorderBeamLayout;
+/**
+ * 把单色线段拆成由淡到亮的叠加尾迹。
+ *
+ * 所有层共享同一动画相位，较短且更亮的层叠在前端，形成接近渐变的彗星头；
+ * 同时避免 SVG gradient 在 Native/Web 上的实现差异。
+ */
+export declare function borderBeamTrail(beamLength: number): {
+    length: number;
+    opacity: 0.12 | 0.24 | 0.42 | 0.88;
+}[];
 export declare function borderBeamGeometry(input: {
     layout: BorderBeamLayout;
     lineWidth: number;

package/lib/typescript/src/components/ui/BorderBeam/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/shared.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,eAAO,MAAM,wBAAwB,EAAE,gBAGtC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;;;;;;EAaA"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/shared.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,eAAO,MAAM,wBAAwB,EAAE,gBAGtC,CAAC;AASF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM;;;IAMjD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;;;;;;EAaA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-design",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "Unif 设计系统:theme + icons + utils + components",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/ui/BorderBeam/BorderBeam.tsx

@@ -15,7 +15,11 @@ import Svg, { Rect } from 'react-native-svg';
 import { radius, useColors, usePrefersReducedMotion } from '../../../theme';
 import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
 import { normalizeBorderBeam } from './normalizeBorderBeam';
-import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from './shared';
+import {
+  borderBeamGeometry,
+  borderBeamTrail,
+  EMPTY_BORDER_BEAM_LAYOUT,
+} from './shared';
 import { styles } from './styles';
 import type { BorderBeamProps } from './types';
 
@@ -48,6 +52,7 @@ export function BorderBeam({
     borderRadius,
   });
   const geometry = borderBeamGeometry({ layout, ...normalized });
+  const trail = borderBeamTrail(geometry.beamLength);
   const dashOffset = useSharedValue(0);
   const showVisual = active && !reducedMotion && geometry.perimeter > 0;
 
@@ -96,23 +101,27 @@ export function BorderBeam({
       {showVisual ? (
         <View pointerEvents="none" style={styles.visual} {...A11Y_HIDDEN_PROPS}>
           <Svg width={layout.width} height={layout.height}>
-            <AnimatedRect
-              animatedProps={animatedProps}
-              x={normalized.lineWidth / 2}
-              y={normalized.lineWidth / 2}
-              width={geometry.rectWidth}
-              height={geometry.rectHeight}
-              rx={geometry.radius}
-              ry={geometry.radius}
-              fill="none"
-              stroke={color ?? colors.primary}
-              strokeWidth={normalized.lineWidth}
-              strokeLinecap="round"
-              strokeDasharray={[
-                geometry.beamLength,
-                Math.max(0, geometry.perimeter - geometry.beamLength),
-              ]}
-            />
+            {trail.map((layer) => (
+              <AnimatedRect
+                key={`${layer.length}-${layer.opacity}`}
+                animatedProps={animatedProps}
+                x={normalized.lineWidth / 2}
+                y={normalized.lineWidth / 2}
+                width={geometry.rectWidth}
+                height={geometry.rectHeight}
+                rx={geometry.radius}
+                ry={geometry.radius}
+                fill="none"
+                stroke={color ?? colors.primary}
+                strokeOpacity={layer.opacity}
+                strokeWidth={normalized.lineWidth}
+                strokeLinecap="round"
+                strokeDasharray={[
+                  layer.length,
+                  Math.max(0, geometry.perimeter - layer.length),
+                ]}
+              />
+            ))}
           </Svg>
         </View>
       ) : null}

package/src/components/ui/BorderBeam/BorderBeam.web.tsx

@@ -6,7 +6,11 @@ import Svg, { Rect } from 'react-native-svg';
 import { radius, useColors, usePrefersReducedMotion } from '../../../theme';
 import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
 import { normalizeBorderBeam } from './normalizeBorderBeam';
-import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from './shared';
+import {
+  borderBeamGeometry,
+  borderBeamTrail,
+  EMPTY_BORDER_BEAM_LAYOUT,
+} from './shared';
 import { styles } from './styles';
 import type { BorderBeamProps } from './types';
 
@@ -38,7 +42,7 @@ export function BorderBeam({
   const colors = useColors();
   const reducedMotion = usePrefersReducedMotion();
   const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
-  const rectRef = useRef<any>(null);
+  const rectRefs = useRef<any[]>([]);
   const normalized = normalizeBorderBeam({
     duration,
     lineWidth,
@@ -46,20 +50,25 @@ export function BorderBeam({
     borderRadius,
   });
   const geometry = borderBeamGeometry({ layout, ...normalized });
+  const trail = borderBeamTrail(geometry.beamLength);
   const showVisual = active && !reducedMotion && geometry.perimeter > 0;
 
   useEffect(() => {
     if (!showVisual) return;
     ensureKeyframes();
-    const node = rectRef.current;
-    if (!node?.style) return;
-    node.style.setProperty(
-      '--unif-border-beam-path',
-      `${geometry.perimeter}px`
-    );
-    node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
+    const nodes = rectRefs.current.filter((node) => node?.style);
+    if (nodes.length === 0) return;
+    nodes.forEach((node) => {
+      node.style.setProperty(
+        '--unif-border-beam-path',
+        `${geometry.perimeter}px`
+      );
+      node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
+    });
     return () => {
-      node.style.animation = '';
+      nodes.forEach((node) => {
+        node.style.animation = '';
+      });
     };
   }, [geometry.perimeter, normalized.duration, showVisual]);
 
@@ -87,23 +96,29 @@ export function BorderBeam({
       {showVisual ? (
         <View pointerEvents="none" style={styles.visual} {...A11Y_HIDDEN_PROPS}>
           <Svg width={layout.width} height={layout.height}>
-            <Rect
-              ref={rectRef}
-              x={normalized.lineWidth / 2}
-              y={normalized.lineWidth / 2}
-              width={geometry.rectWidth}
-              height={geometry.rectHeight}
-              rx={geometry.radius}
-              ry={geometry.radius}
-              fill="none"
-              stroke={color ?? colors.primary}
-              strokeWidth={normalized.lineWidth}
-              strokeLinecap="round"
-              strokeDasharray={[
-                geometry.beamLength,
-                Math.max(0, geometry.perimeter - geometry.beamLength),
-              ]}
-            />
+            {trail.map((layer, index) => (
+              <Rect
+                key={`${layer.length}-${layer.opacity}`}
+                ref={(node) => {
+                  rectRefs.current[index] = node;
+                }}
+                x={normalized.lineWidth / 2}
+                y={normalized.lineWidth / 2}
+                width={geometry.rectWidth}
+                height={geometry.rectHeight}
+                rx={geometry.radius}
+                ry={geometry.radius}
+                fill="none"
+                stroke={color ?? colors.primary}
+                strokeOpacity={layer.opacity}
+                strokeWidth={normalized.lineWidth}
+                strokeLinecap="round"
+                strokeDasharray={[
+                  layer.length,
+                  Math.max(0, geometry.perimeter - layer.length),
+                ]}
+              />
+            ))}
           </Svg>
         </View>
       ) : null}

package/src/components/ui/BorderBeam/shared.ts

@@ -5,6 +5,27 @@ export const EMPTY_BORDER_BEAM_LAYOUT: BorderBeamLayout = {
   height: 0,
 };
 
+const BORDER_BEAM_TRAIL = [
+  { lengthRatio: 1, opacity: 0.12 },
+  { lengthRatio: 0.75, opacity: 0.24 },
+  { lengthRatio: 0.5, opacity: 0.42 },
+  { lengthRatio: 0.25, opacity: 0.88 },
+] as const;
+
+/**
+ * 把单色线段拆成由淡到亮的叠加尾迹。
+ *
+ * 所有层共享同一动画相位，较短且更亮的层叠在前端，形成接近渐变的彗星头；
+ * 同时避免 SVG gradient 在 Native/Web 上的实现差异。
+ */
+export function borderBeamTrail(beamLength: number) {
+  const safeLength = Math.max(0, beamLength);
+  return BORDER_BEAM_TRAIL.map(({ lengthRatio, opacity }) => ({
+    length: safeLength * lengthRatio,
+    opacity,
+  }));
+}
+
 export function borderBeamGeometry(input: {
   layout: BorderBeamLayout;
   lineWidth: number;