ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 09:20:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

Refactor CoolHeaderText component to add animation and improve styling

Browse source
This commit is contained in:
mauro-balades 2024-09-16 23:25:04 +02:00
parent 69d4f40c55
commit 84bea350b3
1 changed files with 2 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/cool-header-text.tsx
View file

@ -17,12 +17,13 @@ const TextTitle = styled.h1`
background-image: linear-gradient(90deg, #0077e7, #01d8d1); background-image: linear-gradient(90deg, #0077e7, #01d8d1);
filter: hue-rotate(0deg); filter: hue-rotate(0deg);
animation: ${hueShift} 10s infinite linear 1s; animation: ${hueShift} 10s infinite linear 1s;
padding-bottom: 5px;
`; `;
export default function CoolHeaderText() { export default function CoolHeaderText() {
return ( return (
<> <>
<div className="relative font-extrabold mt-5 mb-5 -translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl"> <div className="relative font-extrabold mt-5 mb-3 -translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl">
<TextTitle> <TextTitle>
Beautiful. Fast. Private.<br />Your Browser, Your Way. Beautiful. Fast. Private.<br />Your Browser, Your Way.
</TextTitle> </TextTitle>