'init'
This commit is contained in:
32
app/components/SparkText/SparkText.tsx
Normal file
32
app/components/SparkText/SparkText.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
interface SparkTextProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
const sparkTextStyle: React.CSSProperties = {
|
||||
textShadow: '0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.5)',
|
||||
animation: 'sparkle 1s infinite'
|
||||
};
|
||||
|
||||
const SparkText: React.FC<SparkTextProps> = ({ text }) => {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
@keyframes sparkle {
|
||||
0%, 100% {
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(163, 13, 13, 0.5);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 10px rgb(214, 44, 44), 0 0 20px rgb(139, 198, 31), 0 0 30px rgb(41, 195, 82);
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<span style={sparkTextStyle}>{text}</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SparkText;
|
||||
Reference in New Issue
Block a user