50 components available
Data Feeding In

Name: Data Feeding In
Uploaded: 2024-10-23T00:00:00.000Z
Description: An animated data feed component with flowing table rows and pulse-traced SVG paths, designed to simulate real-time data streaming into a UI.
October 2024
An animated data feed component with flowing table rows and pulse-traced SVG paths, designed to simulate real-time data streaming into a UI.
Source Code
MUI
Tailwind
data-feeding-in.tsx
1import { Box } from '@mui/system';
2import { motion, useAnimation } from 'framer-motion';
3import React, { useEffect } from 'react';
4import { useRef } from 'react';
5
6const paths = [
7  'M0 100H55.022C61.8914 100 68.6451 101.769 74.6324 105.137L120.368 130.863C126.355 134.231 133.109 136 139.978 136H201.5',
8  'M0 60H48.2171C59.2463 60 69.7861 64.5539 77.3451 72.5854L117.655 115.415C125.214 123.446 135.754 128 146.783 128H201.5',
9  'M0 188H55.022C61.8914 188 68.6451 186.231 74.6324 182.863L120.368 157.137C126.355 153.769 133.109 152 139.978 152H201.5',
10  'M0 228H48.2171C59.2463 228 69.7861 223.446 77.3451 215.415L117.655 172.585C125.214 164.554 135.754 160 146.783 160H201.5',
11  'M0 287H41.7852C56.4929 287 70.0142 278.929 76.994 265.983L118.49 189.017C125.47 176.071 138.991 168 153.699 168H202',
12  'M0 144L201 145',
13  'M0 1H41.5946C56.3171 1 69.8495 9.08744 76.823 22.0537L118.177 98.9463C125.15 111.913 138.683 120 153.405 120H201.5',
14];
15
16const DataFeedingIn = () => {
17  const svgRef = useRef<any>(null);
18  const controls = useAnimation();
19
20  useEffect(() => {
21    if (!svgRef.current) {
22      return;
23    }
24
25    const pulseGradients = Array.from(
26      svgRef.current.querySelectorAll('[id*=pulse]')
27    );
28
29    const animate = async () => {
30      pulseGradients.forEach((gradient, i) => {
31        controls.start({
32          x1: ['-50%', '100%'],
33          x2: ['50%', '150%'],
34          transition: {
35            duration: 1.5,
36            ease: 'linear',
37            repeat: Infinity,
38            delay: 0.25,
39          },
40        });
41      });
42    };
43
44    animate();
45  }, [controls]);
46
47  return (
48    <Box
49      sx={{
50        display: 'flex',
51        alignItems: 'center',
52        flexDirection: 'column',
53        justifyContent: 'center',
54        mt: '120px',
55      }}
56    >
57      <Box
58        sx={{
59          transform: 'rotate(90deg) translateX(40px) translateY(0)',
60          height: 80,
61          transformOrigin: 'right',
62        }}
63      >
64        <svg
65          width="202"
66          className="ml-auto"
67          viewBox="0 0 202 288"
68          fill="none"
69          xmlns="http://www.w3.org/2000/svg"
70          ref={svgRef}
71        >
72          {paths.map((d, index) => (
73            <React.Fragment key={index}>
74              <path
75                d={d}
76                stroke="white"
77                mask="url(#mask)"
78                strokeLinecap="round"
79                strokeOpacity="0.2"
80                strokeWidth="2"
81                strokeDasharray="0.1 3"
82              />
83              <path
84                d={d}
85                stroke={`url(#pulse-${index})`}
86                strokeLinecap="round"
87                strokeOpacity="1"
88                strokeWidth="2"
89                strokeDasharray="0.1 3"
90                mask="url(#mask)"
91              />
92            </React.Fragment>
93          ))}
94
95          <defs>
96            <linearGradient
97              id="maskGrad"
98              x1="202"
99              y1="227"
100              x2="32"
101              y2="227"
102              gradientUnits="userSpaceOnUse"
103            >
104              <stop stopColor="white" />
105              <stop offset="1" stopColor="white" stopOpacity="0" />
106            </linearGradient>
107
108            <mask id="mask" maskUnits="userSpaceOnUse">
109              <rect width="202" height="288" fill="url(#maskGrad)" />
110            </mask>
111
112            {Array.from({ length: 7 }).map((_, index) => (
113              <motion.linearGradient
114                key={index}
115                id={`pulse-${index}`}
116                x1="-100%"
117                y1="0"
118                x2="0"
119                y2="0"
120                gradientUnits="userSpaceOnUse"
121                animate={controls}
122              >
123                <stop offset="0.35" stopColor="#716FFF" stopOpacity="0" />
124                <stop offset="0.45" stopColor="#716FFF" />
125                <stop offset="0.55" stopColor="#716FFF" />
126                <stop offset="0.65" stopColor="#716FFF" stopOpacity="0" />
127              </motion.linearGradient>
128            ))}
129          </defs>
130        </svg>
131      </Box>
132
133      <Box
134        sx={{
135          width: 400,
136          background:
137            'linear-gradient(rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%)',
138          borderRadius: '14px',
139          height: 260,
140          overflow: 'hidden',
141        }}
142      >
143        <Box
144          sx={{
145            padding: '10px',
146            display: 'flex',
147            gap: '8px',
148            borderBottom: '1px solid rgba(255, 255, 255, 0.075)',
149          }}
150        >
151          <Box
152            sx={{
153              width: 8,
154              height: 8,
155              borderRadius: '50%',
156              backgroundColor: 'rgba(255, 255, 255, 0.1)',
157            }}
158          />
159          <Box
160            sx={{
161              width: 8,
162              height: 8,
163              borderRadius: '50%',
164              backgroundColor: 'rgba(255, 255, 255, 0.1)',
165            }}
166          />
167          <Box
168            sx={{
169              width: 8,
170              height: 8,
171              borderRadius: '50%',
172              backgroundColor: 'rgba(255, 255, 255, 0.1)',
173            }}
174          />
175        </Box>
176        <Box sx={{ padding: '0' }}>
177          <Box sx={{ display: 'flex', overflow: 'hidden', width: '100%' }}>
178            {Array.from({ length: 3 }, (_, index) => (
179              <Box
180                key={index}
181                sx={{
182                  flexShrink: 0,
183                  width: 180,
184                  height: 40,
185                  borderTop: '1px solid rgba(255, 255, 255, 0.075)',
186                  borderRight: '1px solid rgba(255, 255, 255, 0.075)',
187                  borderBottom: '1px solid rgba(255, 255, 255, 0.075)',
188                  px: '8px',
189                  display: 'flex',
190                  alignItems: 'center',
191                  gap: '8px',
192                }}
193              >
194                <Box
195                  sx={{
196                    border: '2px solid rgba(255, 255, 255, 0.075)',
197                    background: 'rgba(255, 255, 255, 0.15)',
198                    width: 16,
199                    height: 16,
200                    borderRadius: '4px',
201                  }}
202                />
203                <Box
204                  sx={{
205                    background: 'rgba(255, 255, 255, 0.075)',
206                    height: 8,
207                    width: 88,
208                    borderRadius: '4px',
209                  }}
210                />
211              </Box>
212            ))}
213          </Box>
214          {Array.from({ length: 6 }, (_, i) => (
215            <Box
216              component={motion.div}
217              key={i}
218              sx={{ display: 'flex', overflow: 'hidden', width: '100%' }}
219              initial={{ y: 20, opacity: 0 }}
220              animate={{ y: 0, opacity: 1 }}
221              transition={{
222                ease: 'easeIn',
223                delay: 1.25 + i * 1.5,
224                duration: 0.3,
225              }}
226            >
227              {Array.from({ length: 3 }, (_, j) => (
228                <Box
229                  key={i + j}
230                  sx={{
231                    flexShrink: 0,
232                    width: 180,
233                    height: 36,
234                    borderRight: '1px solid rgba(255, 255, 255, 0.075)',
235                    borderBottom: '1px solid rgba(255, 255, 255, 0.075)',
236                    px: '8px',
237                    display: 'flex',
238                    alignItems: 'center',
239                    gap: '8px',
240                  }}
241                >
242                  <Box
243                    sx={{
244                      background: 'rgba(255, 255, 255, 0.075)',
245                      height: 8,
246                      width: 88,
247                      borderRadius: '4px',
248                    }}
249                  />
250                </Box>
251              ))}
252            </Box>
253          ))}
254        </Box>
255      </Box>
256    </Box>
257  );
258};
259export default DataFeedingIn;
Fingerprint Scan
Interactive Envelope