"use client"; import * as React from "react" import { useEffect, useRef, useState } from "react"; import { Slider } from "@/components/ui/slider"; import { DIcons } from "dicons"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; type ColorStop = { color: string; position: number; }; const defaultColorStops: ColorStop[] = [ { color: "#00e1ff", position: 0 }, { color: "#0000ff", position: 100 }, ]; export function GradientGenerator() { const [colorStops, setColorStops] = useState(defaultColorStops); const [angle, setAngle] = useState(90); const [noiseAmount, setNoiseAmount] = useState(0); const [applyNoise, setApplyNoise] = useState(false); const [isRadialGradient, setIsRadialGradient] = useState(false); const canvasRef = useRef(null); const displayCanvasRef = useRef(null); const gradientString = colorStops .map((stop) => `${stop.color} ${stop.position}%`) .join(", "); const gradientStyle = { background: !isRadialGradient ? `linear-gradient(${angle}deg, ${gradientString})` : `radial-gradient(circle, ${gradientString})`, }; const gradientCSS = !isRadialGradient ? `background: linear-gradient(${angle}deg, ${gradientString});` : `background: radial-gradient(circle, ${gradientString});`; const copyToClipboard = () => { navigator.clipboard.writeText(gradientCSS).then(() => { }); }; useEffect(() => { updateCanvas(); }, [colorStops, angle, noiseAmount, applyNoise, isRadialGradient]); const updateCanvas = () => { const canvas = canvasRef.current; const displayCanvas = displayCanvasRef.current; if (canvas && displayCanvas) { const ctx = canvas.getContext("2d"); const displayCtx = displayCanvas.getContext("2d"); if (ctx && displayCtx) { let gradient; if (!isRadialGradient) { gradient = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height, ); } else { gradient = ctx.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2, ); } colorStops.forEach((stop) => { gradient.addColorStop(stop.position / 100, stop.color); }); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); if (applyNoise) { const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const noise = (Math.random() - 0.5) * noiseAmount; data[i] = Math.min(255, Math.max(0, data[i] + noise)); data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noise)); data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noise)); } ctx.putImageData(imageData, 0, 0); } displayCtx.drawImage( canvas, 0, 0, displayCanvas.width, displayCanvas.height, ); } } }; const downloadJPG = () => { const canvas = canvasRef.current; if (canvas) { const dataURL = canvas.toDataURL("image/jpeg"); const link = document.createElement("a"); link.download = "gradient_with_noise.jpg"; link.href = dataURL; link.click(); } }; const addColorStop = () => { if (colorStops.length < 5) { const newPosition = Math.round( (colorStops[colorStops.length - 1].position + colorStops[0].position) / 2, ); setColorStops([ ...colorStops, { color: "#ffffff", position: newPosition }, ]); } }; const removeColorStop = (index: number) => { if (colorStops.length > 2) { setColorStops(colorStops.filter((_, i) => i !== index)); } }; const updateColorStop = (index: number, color: string, position: number) => { const newColorStops = [...colorStops]; newColorStops[index] = { color, position }; setColorStops(newColorStops.sort((a, b) => a.position - b.position)); }; const resetSettings = () => { setColorStops(defaultColorStops); setAngle(90); setNoiseAmount(0); setApplyNoise(false); setIsRadialGradient(false); }; return (

{colorStops.map((stop, index) => (

updateColorStop(index, e.target.value, stop.position) } />

updateColorStop(index, stop.color, Number(e.target.value)) } className="w-16" /> {colorStops.length > 2 && ( )}

))} {colorStops.length < 5 && ( )}

Linear setIsRadialGradient(checked)} /> Radial

{!isRadialGradient && (

Angle setAngle(Number(value))} /> {angle}°

)}

Noise {applyNoise && (

setNoiseAmount(Number(value))} /> {noiseAmount}

)}

CSS Code

); }