fix: fixed grad and grain

This commit is contained in:
Raj Sharma 2024-01-09 23:25:24 +05:30
parent 30f5c4b39d
commit c21304fa67
2 changed files with 69 additions and 65 deletions

View File

@ -8,16 +8,16 @@ import { motion } from "framer-motion";
export function GradientProvider({ children }: { children: React.ReactNode }) { export function GradientProvider({ children }: { children: React.ReactNode }) {
return ( return (
<div className="relative w-fit">
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
className="relative w-fit" className="absolute rotate-180 -z-[5] w-[600px] h-[800px] opacity-60 top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2"
> >
<div className="absolute rotate-180 -z-[5] w-[600px] h-[800px] opacity-60 top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2">
<Image src={gradient} alt="gradient" /> <Image src={gradient} alt="gradient" />
</div>
{children}
</motion.div> </motion.div>
{children}
</div>
); );
} }
@ -31,19 +31,17 @@ export function SymetricGradProvider({
gradient_class?: string; gradient_class?: string;
}) { }) {
return ( return (
<motion.div className={cn("relative w-fit", className)}>
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
className={cn("relative w-fit", className)}
>
<div
className={cn( className={cn(
"absolute w-full -z-10 h-[800px] opacity-70 top-1/4 rotate-180 -translate-x-1/2 -translate-y-1/2 left-1/2", "absolute w-full -z-10 h-[800px] opacity-70 top-1/4 rotate-180 -translate-x-1/2 -translate-y-1/2 left-1/2",
gradient_class, gradient_class,
)} )}
> >
<Image src={symetric_gradient} alt="gradient" /> <Image src={symetric_gradient} alt="gradient" />
</div> </motion.div>
{children} {children}
</motion.div> </motion.div>
); );

View File

@ -1,8 +1,6 @@
"use client"; "use client";
import { motion } from "framer-motion"; import React, { useEffect, useRef, useCallback } from "react";
// Grain.tsx
import React, { useEffect, useRef } from "react";
type GrainOptions = { type GrainOptions = {
patternWidth?: number; patternWidth?: number;
@ -18,68 +16,76 @@ export const GrainProvider = ({
}: { }: {
grain_options?: GrainOptions; grain_options?: GrainOptions;
}) => { }) => {
const providerRef = useRef<HTMLDivElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const animationFrameId = useRef<number>();
// Function to generate and apply grain effect const createGrainPattern = (
const applyGrain = (ele: HTMLElement, opt: GrainOptions) => { ctx: CanvasRenderingContext2D,
const canvas = document.createElement("canvas"); opt: GrainOptions,
const ctx = canvas.getContext("2d"); ) => {
if (!ctx) return; const patternCanvas = document.createElement("canvas");
const pctx = patternCanvas.getContext("2d");
canvas.width = opt.patternWidth ?? 100; patternCanvas.width = opt.patternWidth ?? 200;
canvas.height = opt.patternHeight ?? 100; patternCanvas.height = opt.patternHeight ?? 200;
for (let w = 0; w < canvas.width; w += opt.grainDensity ?? 1) { if (pctx) {
for (let h = 0; h < canvas.height; h += opt.grainDensity ?? 1) { for (let w = 0; w < patternCanvas.width; w += opt.grainDensity ?? 1) {
for (let h = 0; h < patternCanvas.height; h += opt.grainDensity ?? 1) {
const rgb = Math.floor(Math.random() * 256); const rgb = Math.floor(Math.random() * 256);
ctx.fillStyle = `rgba(${rgb / 2}, ${rgb / 2}, ${rgb}, ${opt.grainOpacity ?? 0.1 pctx.fillStyle = `rgba(${rgb / 2}, ${rgb / 2}, ${rgb}, ${opt.grainOpacity ?? 0.1
})`; })`;
ctx.fillRect(w, h, opt.grainWidth ?? 1, opt.grainHeight ?? 1); pctx.fillRect(w, h, opt.grainWidth ?? 1, opt.grainHeight ?? 1);
}
} }
} }
ele.style.backgroundImage = `url(${canvas.toDataURL("image/png")})`; return ctx.createPattern(patternCanvas, "repeat");
}; };
useEffect(() => { const animate = useCallback(() => {
const element = providerRef.current; const canvas = canvasRef.current;
if (!element) return; if (canvas) {
const ctx = canvas.getContext("2d");
// Define options here if (ctx) {
const options: GrainOptions = { const options: GrainOptions = {
patternWidth: 240, patternWidth: 200,
patternHeight: 300, patternHeight: 200,
grainOpacity: 0.05, grainOpacity: 0.05,
grainDensity: 1, grainDensity: 1,
grainWidth: 2, grainWidth: 1,
grainHeight: 2, grainHeight: 1,
}; };
// Apply grain initially canvas.width = window.innerWidth;
applyGrain(element, grain_options ?? options); canvas.height = window.innerHeight;
// Set interval to update grain const pattern = createGrainPattern(ctx, grain_options ?? options);
const intervalId = setInterval(() => { if (pattern) {
applyGrain(element, grain_options ?? options); ctx.fillStyle = pattern;
}, 100); ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Cleanup function animationFrameId.current = requestAnimationFrame(animate);
return () => clearInterval(intervalId); }
}
}, [grain_options]); }, [grain_options]);
useEffect(() => {
animationFrameId.current = requestAnimationFrame(animate);
return () => {
if (animationFrameId.current) {
cancelAnimationFrame(animationFrameId.current);
}
};
}, [animate]);
return ( return (
<motion.div <canvas
initial={{ ref={canvasRef}
opacity: 0, id="grained-canvas"
}}
animate={{
opacity: 1,
}}
ref={providerRef}
id="grained-bg"
className="fixed left-0 top-0 inset-0 z-50 pointer-events-none w-full h-full" className="fixed left-0 top-0 inset-0 z-50 pointer-events-none w-full h-full"
></motion.div> />
); );
}; };
export default GrainProvider; export default GrainProvider;