feat: added grain

This commit is contained in:
Raj 2024-05-04 10:05:26 +05:30
parent 3fb73734ba
commit 0e367bb3a0
4 changed files with 78 additions and 10 deletions

BIN
public/grain.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

View File

@ -16,16 +16,17 @@ export default function Page() {
return ( return (
<main> <main>
<div className="container py-12 max-w-xl"> <div className="container py-12 max-w-xl">
<GrainProvider <div className="hero fixed top-0 left-0 w-full h-screen"></div>
grain_options={{ {/* <GrainProvider */}
patternWidth: 200, {/* grain_options={{ */}
patternHeight: 200, {/* patternWidth: 200, */}
grainOpacity: 0.1, {/* patternHeight: 200, */}
grainDensity: 1, {/* grainOpacity: 0.1, */}
grainWidth: 1, {/* grainDensity: 1, */}
grainHeight: 1, {/* grainWidth: 1, */}
}} {/* grainHeight: 1, */}
/> {/* }} */}
{/* /> */}
<header className="my-2 mt-8 relative"> <header className="my-2 mt-8 relative">
<Sparkle <Sparkle
strokeWidth={1.5} strokeWidth={1.5}

View File

@ -131,6 +131,8 @@ export default async function Story({
{/* "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22%3E%3Cfilter id=%22a%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23a)%22/%3E%3C/svg%3E')", */} {/* "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22%3E%3Cfilter id=%22a%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23a)%22/%3E%3C/svg%3E')", */}
{/* }} */} {/* }} */}
{/* ></div> */} {/* ></div> */}
<div className="hero fixed top-0 left-0 w-full h-screen"></div>
<BackgroundGradentProvider className="-z-10 h-screen w-full opacity-60" /> <BackgroundGradentProvider className="-z-10 h-screen w-full opacity-60" />
<Image <Image
width={400} width={400}

View File

@ -78,3 +78,68 @@
a { a {
@apply text-primary font-medium hover:underline underline-offset-2; @apply text-primary font-medium hover:underline underline-offset-2;
} }
.overlay {
/* position: absolute; */
/* width: 100vw; */
/* height: 100vh; */
/* background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); */
/* z-index: 1; */
}
.hero {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
/* background-image: url("https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w"); */
background-position: center;
}
.hero:after {
content: "";
background-image: url("/grain.png");
height: 300%;
width: 300%;
position: fixed;
opacity: 0.08;
animation: animateGrain 8s steps(10) infinite;
}
@keyframes animateGrain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, -20%);
}
30% {
transform: translate(-5%, -10%);
}
40% {
transform: translate(-15%, -20%);
}
50% {
transform: translate(-5%, -10%);
}
60% {
transform: translate(-15%, -20%);
}
70% {
transform: translate(-5%, -10%);
}
80% {
transform: translate(-15%, -20%);
}
90% {
transform: translate(-5%, -10%);
}
100% {
transform: translate(-15%, -20%);
}
}