fezcode.github.io/src/components/LiquidPrismArt.jsx at main · fezcode/fezcode.github.io

History

56 lines (51 loc) · 2.31 KB

Raw

import React, { useMemo } from 'react';

const LiquidPrismArt = ({ seed = 'prism', className = '' }) => {

const shapes = useMemo(() => {

let h = 0xdeadbeef;

const safeSeed = seed || 'prism';

for (let i = 0; i < safeSeed.length; i++) {

h = Math.imul(h ^ safeSeed.charCodeAt(i), 2654435761);

}

const rng = () => {

h = Math.imul(h ^ (h >>> 16), 2246822507);

h = Math.imul(h ^ (h >>> 13), 3266489909);

return ((h ^= h >>> 16) >>> 0) / 4294967296;

};

const baseHue = Math.floor(rng() * 360);

// Vibrant, complementary colors

const colors = [

`hsl(${baseHue}, 100%, 65%)`,

`hsl(${(baseHue + 60) % 360}, 100%, 60%)`,

`hsl(${(baseHue + 150) % 360}, 100%, 70%)`,

`hsl(${(baseHue + 240) % 360}, 100%, 65%)`,

];

const blobs = [];

for (let i = 0; i < 4; i++) {

blobs.push({

cx: 20 + rng() * 60,

cy: 20 + rng() * 60,

r: 35 + rng() * 40,

color: colors[i],

dur: 15 + rng() * 15,

tx: (rng() - 0.5) * 60,

ty: (rng() - 0.5) * 60,

});

}

return { blobs, mainColor: colors[0] };

}, [seed]);

return (

{shapes.blobs.map((b, i) => (

</circle>

))}

</svg>

{/* Noise overlay for organic texture */}

</div>

);

};

export default LiquidPrismArt;

FilesExpand file tree

LiquidPrismArt.jsx

Latest commit

History

LiquidPrismArt.jsx

File metadata and controls