Milad Fakurian
Cloudflare DNS H1
Animated H1 inspired by Cloudflare's 1.1.1.1 DNS, featuring a moving background image clipped to the text.
H1AnimationText AnimationHero
HTML
CSS
HTML and CSS only component. No JavaScript needed. The moving background effect is achieved purely through CSS animations.
React implementation
CloudflareDNSH1.jsx
import styles from "./CloudflareDNSH1.module.css";
export default function CloudflareDNSH1() {
return (
<div className={styles.frameWrapper}>
<div className={styles.heading}>
1.1.1.1
</div>
</div>
);
};
import styles from "./CloudflareDNSH1.module.css";
export default function CloudflareDNSH1() {
return (
<div className={styles.frameWrapper}>
<div className={styles.heading}>
1.1.1.1
</div>
</div>
);
};
CloudflareDNSH1.module.css
.frameWrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100dvh;
width: 100%;
}
.heading {
font-size: clamp(3rem, 6vw + 1rem, 8rem);
letter-spacing: -0.05em;
font-weight: 600;
font-family: "Geist Mono", monospace;
background-image: url("https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YWJzdHJhY3R8ZW58MHx8MHx8fDA%3D");
background-size: 1360px 260px;
background-clip: text;
color: transparent;
background-repeat: repeat-x;
animation: moveBg 45s linear infinite;
}
@keyframes moveBg {
0% {
background-position: 0 0;
}
100% {
background-position: -1360px 0;
}
}
.frameWrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100dvh;
width: 100%;
}
.heading {
font-size: clamp(3rem, 6vw + 1rem, 8rem);
letter-spacing: -0.05em;
font-weight: 600;
font-family: "Geist Mono", monospace;
background-image: url("https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YWJzdHJhY3R8ZW58MHx8MHx8fDA%3D");
background-size: 1360px 260px;
background-clip: text;
color: transparent;
background-repeat: repeat-x;
animation: moveBg 45s linear infinite;
}
@keyframes moveBg {
0% {
background-position: 0 0;
}
100% {
background-position: -1360px 0;
}
}