Skip to content

Commit 6a3f347

Browse files
wkylinwkylin
committed
feat: gradient tracing
1 parent 48ef24e commit 6a3f347

2 files changed

Lines changed: 91 additions & 14 deletions

File tree

‎src/components/stateless/GradientTracing/index.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react'
2+
import { motion } from 'motion/react'
3+
4+
interface GradientTracingProps {
5+
width: number
6+
height: number
7+
baseColor?: string
8+
gradientColors?: [string, string, string]
9+
animationDuration?: number
10+
strokeWidth?: number
11+
}
12+
13+
const GradientTracing: React.FC<GradientTracingProps> = ({
14+
width,
15+
height,
16+
baseColor = 'black',
17+
gradientColors = ['#2EB9DF', '#2EB9DF', '#9E00FF'],
18+
animationDuration = 2,
19+
strokeWidth = 2,
20+
}) => {
21+
const gradientId = `pulse-${Math.random().toString(36).substring(2, 9)}`
22+
23+
return (
24+
<div className="relative" style={{ width, height }}>
25+
<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="none">
26+
<line x1={0} y1={height / 2} x2={width} y2={height / 2} stroke={baseColor} strokeOpacity="0.2" />
27+
<line
28+
x1={0}
29+
y1={height / 2}
30+
x2={width}
31+
y2={height / 2}
32+
stroke={`url(#${gradientId})`}
33+
strokeLinecap="round"
34+
strokeWidth={strokeWidth}
35+
/>
36+
<defs>
37+
<motion.linearGradient
38+
animate={{
39+
x1: [0, width * 2],
40+
x2: [0, width],
41+
}}
42+
transition={{
43+
duration: animationDuration,
44+
repeat: Infinity,
45+
ease: 'linear',
46+
}}
47+
id={gradientId}
48+
gradientUnits="userSpaceOnUse"
49+
>
50+
<stop stopColor={gradientColors[0]} stopOpacity="0" />
51+
<stop stopColor={gradientColors[1]} />
52+
<stop offset="1" stopColor={gradientColors[2]} stopOpacity="0" />
53+
</motion.linearGradient>
54+
</defs>
55+
</svg>
56+
</div>
57+
)
58+
}
59+
60+
export default GradientTracing

‎src/pages/demo/index.jsx‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import FixTabPanel from '@stateless/FixTabPanel'
44
import AnimationTabs from '@stateless/AnimationTabs'
55
import LogoSlider from '@stateless/LogoSlider'
66
import FloatingIcon, { SocialIcon } from '@stateless/FloatingIcon'
7+
import GradientTracing from '@stateless/GradientTracing'
78
import Footer from '@stateless/Footer'
89
import StarBack from '@stateless/StarBackground'
910

@@ -128,34 +129,50 @@ const ProDemo = () => {
128129
</div>
129130

130131
<LogoSlider companies={companies} />
132+
133+
<section className="flex flex-row items-center justify-center gap-5">
134+
<GradientTracing width={300} height={100} path="M0,50 Q150,0 300,50" />
135+
<GradientTracing
136+
width={200}
137+
height={200}
138+
path="M100,0 L75,75 L125,75 L50,200 L100,100 L50,100 L100,0"
139+
gradientColors={['#F1C40F', '#F1C40F', '#E67E22']}
140+
/>
141+
<GradientTracing
142+
width={200}
143+
height={200}
144+
path="M100,100 m0,-75 a75,75 0 1,1 -0.1,0 z"
145+
gradientColors={['#7B68EE', '#7B68EE', '#3498DB']}
146+
/>
147+
</section>
148+
131149
<div className="b relative mx-auto flex h-[20rem] w-full max-w-5xl flex-col items-start justify-start [perspective:1000px]">
132150
<AnimationTabs tabs={tabs} />
133151
</div>
134152

135153
<Table columns={columns} dataSource={[]} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
136154

137-
<section class="m-10 flex items-center justify-center gap-5">
138-
<div class="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
139-
<div class="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
140-
<span class="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">200+</span>
155+
<section className="m-10 flex items-center justify-center gap-5">
156+
<div className="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
157+
<div className="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
158+
<span className="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">200+</span>
141159
</div>
142160
</div>
143-
<div class="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
144-
<div class="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
145-
<span class="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">400+</span>
161+
<div className="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
162+
<div className="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
163+
<span className="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">400+</span>
146164
</div>
147165
</div>
148-
<div class="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
149-
<div class="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
150-
<span class="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">1200+</span>
166+
<div className="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
167+
<div className="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
168+
<span className="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">1200+</span>
151169
</div>
152170
</div>
153-
<div class="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
154-
<div class="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
155-
<span class="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">2000+</span>
171+
<div className="mb-5 inline-block rounded-xl bg-gradient-to-tl from-blue-600 via-transparent to-purple-400 p-px">
172+
<div className="min-w-20 rounded-xl bg-white px-3 py-1.5 text-3xl font-bold md:text-4xl lg:text-5xl lg:leading-tight dark:bg-neutral-900">
173+
<span className="bg-gradient-to-tl from-blue-600 to-purple-400 bg-clip-text text-transparent">2000+</span>
156174
</div>
157175
</div>
158-
<setion></setion>
159176
</section>
160177
<Footer />
161178
</FixTabPanel>

0 commit comments

Comments
 (0)