Paper Shaders 원본
lens distortion
배경 · Apache-2.0
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
저장한 HTML에서는 갤러리의 재생 설정이 적용되지 않아요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다. 실행 HTML에는 미리보기를 위한 실행 환경이 들어 있습니다.
docs/registry/lens-distortion-example.tsx
import { LensDistortion, LensDistortionProps } from '@paper-design/shaders-react';
export function LensDistortionExample(props: LensDistortionProps) {
return <LensDistortion style={{ position: 'fixed', width: '100%', height: '100%' }} {...props} />;
}
packages/shaders-react/src/shaders/lens-distortion.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
lensDistortionFragmentShader,
ShaderFitOptions,
type LensDistortionUniforms,
type LensDistortionParams,
defaultObjectSizing,
type ImageShaderPreset,
} from '@paper-design/shaders';
export interface LensDistortionProps extends ShaderComponentProps, LensDistortionParams {}
type LensDistortionPreset = ImageShaderPreset<LensDistortionParams>;
export const defaultPreset: LensDistortionPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 1,
fit: 'contain',
speed: 0,
frame: 0,
spread: 0.6,
bias: 1,
angle: 0,
perspective: 0.1,
count: 35,
dispersion: 1,
dispersionShift: 0,
dispersionColor: 0.6,
focusCenter: 0.8,
focusEdges: 1,
swirl: 0.35,
noise: 0,
noiseFrequency: 0.25,
noiseOffset: 0,
lensBulge: 0,
lensCircle: 0,
grainMixer: 0,
grainOverlay: 0,
imageX: 0,
imageY: 0,
},
} as const;
export const fisheyePreset: LensDistortionPreset = {
name: 'Fisheye',
params: {
...defaultObjectSizing,
scale: 1,
fit: 'contain',
speed: 0,
frame: 0,
spread: 0.7,
bias: 1,
angle: 0,
perspective: 0.75,
count: 15,
dispersion: 1,
dispersionShift: 0,
dispersionColor: 0.7,
focusCenter: 0.9,
focusEdges: 1,
swirl: 1,
noise: 0,
noiseFrequency: 0.25,
noiseOffset: 0,
lensBulge: 0.95,
lensCircle: 1,
grainMixer: 0.5,
grainOverlay: 0,
imageX: 0,
imageY: 0,
},
} as const;
export const duotonePreset: LensDistortionPreset = {
name: 'Duotone',
params: {
...defaultObjectSizing,
fit: 'contain',
speed: 0,
frame: 0,
spread: 0.1,
bias: 0,
angle: 0,
perspective: 0,
count: 2,
dispersion: 1,
dispersionShift: 0,
dispersionColor: 0.1,
focusCenter: 0,
focusEdges: 0,
swirl: 0,
noise: 0,
noiseFrequency: 0.25,
noiseOffset: 0,
lensBulge: 0,
lensCircle: 0,
grainMixer: 0.1,
grainOverlay: 0.3,
imageX: 0,
imageY: 0,
},
} as const;
export const smokePreset: LensDistortionPreset = {
name: 'Smoke',
params: {
...defaultObjectSizing,
scale: 1,
fit: 'contain',
speed: 0,
frame: 0,
spread: 0.65,
bias: -1,
angle: 0,
perspective: 0.4,
count: 50,
dispersion: 0,
dispersionShift: 0,
dispersionColor: 0.31,
focusCenter: 0,
focusEdges: 0.6,
swirl: 0,
noise: 1,
noiseFrequency: 0.35,
noiseOffset: 0.3,
lensBulge: 0,
lensCircle: 0,
grainMixer: 0,
grainOverlay: 0,
imageX: 0,
imageY: 0,
},
} as const;
export const lensDistortionPresets: LensDistortionPreset[] = [
defaultPreset,
fisheyePreset,
duotonePreset,
smokePreset,
];
export const LensDistortion: React.FC<LensDistortionProps> = memo(function LensDistortionImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
image = '',
spread = defaultPreset.params.spread,
bias = defaultPreset.params.bias,
angle = defaultPreset.params.angle,
perspective = defaultPreset.params.perspective,
count = defaultPreset.params.count,
dispersion = defaultPreset.params.dispersion,
dispersionShift = defaultPreset.params.dispersionShift,
dispersionColor = defaultPreset.params.dispersionColor,
focusCenter = defaultPreset.params.focusCenter,
focusEdges = defaultPreset.params.focusEdges,
swirl = defaultPreset.params.swirl,
noise = defaultPreset.params.noise,
noiseFrequency = defaultPreset.params.noiseFrequency,
noiseOffset = defaultPreset.params.noiseOffset,
lensBulge = defaultPreset.params.lensBulge,
lensCircle = defaultPreset.params.lensCircle,
grainMixer = defaultPreset.params.grainMixer,
grainOverlay = defaultPreset.params.grainOverlay,
imageX = defaultPreset.params.imageX,
imageY = defaultPreset.params.imageY,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: LensDistortionProps) {
const uniforms = {
// Own uniforms
u_image: image,
u_spread: spread,
u_bias: bias,
u_angle: angle,
u_perspective: perspective,
u_count: count,
u_dispersion: dispersion,
u_dispersionShift: dispersionShift,
u_dispersionColor: dispersionColor,
u_focusCenter: focusCenter,
u_focusEdges: focusEdges,
u_swirl: swirl,
u_noise: noise,
u_noiseFrequency: noiseFrequency,
u_noiseOffset: noiseOffset,
u_lensBulge: lensBulge,
u_lensCircle: lensCircle,
u_grainMixer: grainMixer,
u_grainOverlay: grainOverlay,
u_imageX: imageX,
u_imageY: imageY,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies LensDistortionUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={lensDistortionFragmentShader}
mipmaps={['u_image']}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
함께 쓰는 파일 103개 보기
docs/src/app/(shaders)/lens-distortion/page.tsx
'use client';
import { LensDistortion, lensDistortionPresets } from '@paper-design/shaders-react';
import { useControls, button, folder } from 'leva';
import { setParamsSafe, useResetLevaParams } from '@/helpers/use-reset-leva-params';
import { usePresetHighlight } from '@/helpers/use-preset-highlight';
import { cleanUpLevaParams } from '@/helpers/clean-up-leva-params';
import { ShaderFit, lensDistortionMeta } from '@paper-design/shaders';
import { levaImageButton } from '@/helpers/leva-image-button';
import { useState, useEffect, useCallback } from 'react';
import { ShaderDetails } from '@/components/shader-details';
import { lensDistortionDef } from '@/shader-defs/lens-distortion-def';
import { ShaderContainer } from '@/components/shader-container';
import { useUrlParams } from '@/helpers/use-url-params';
const { worldWidth, worldHeight, ...defaults } = lensDistortionPresets[0].params;
const imageFiles = [
'001.webp',
'002.webp',
'003.webp',
'004.webp',
'005.webp',
'006.webp',
'007.webp',
'008.webp',
'009.webp',
'0010.webp',
'0011.webp',
'0012.webp',
'0013.webp',
'0014.webp',
'0015.webp',
'0016.webp',
'0017.webp',
'0018.webp',
] as const;
const LensDistortionWithControls = () => {
const [imageIdx, setImageIdx] = useState(-1);
const [image, setImage] = useState<HTMLImageElement | string>('/images/image-filters/0018.webp');
useEffect(() => {
if (imageIdx >= 0) {
const name = imageFiles[imageIdx];
const img = new Image();
img.src = `/images/image-filters/${name}`;
img.onload = () => setImage(img);
}
}, [imageIdx]);
const handleClick = useCallback(() => {
setImageIdx((prev) => (prev + 1) % imageFiles.length);
}, []);
const setImageWithoutStatus = useCallback((img?: HTMLImageElement) => {
setImage(img ?? '');
setImageIdx(-1);
}, []);
const [params, setParams] = useControls(() => {
const presets = Object.fromEntries(
lensDistortionPresets.map(({ name, params: { worldWidth, worldHeight, ...preset } }) => [
name,
button(() => setParamsSafe(params, setParams, preset)),
])
);
return {
spread: { value: defaults.spread, min: 0, max: 1, order: 100 },
bias: { value: defaults.bias, min: -1, max: 1, order: 101 },
angle: { value: defaults.angle, min: 0, max: 360, order: 102 },
perspective: { value: defaults.perspective, min: 0, max: 1, order: 103 },
count: { value: defaults.count, min: 2, max: lensDistortionMeta.maxSamples, step: 1, order: 104 },
dispersion: { value: defaults.dispersion, min: 0, max: 1, order: 105 },
dispersionShift: { value: defaults.dispersionShift, min: -1, max: 1, order: 106 },
dispersionColor: { value: defaults.dispersionColor, min: 0, max: 1, order: 107 },
focusCenter: { value: defaults.focusCenter, min: 0, max: 1, order: 204 },
focusEdges: { value: defaults.focusEdges, min: 0, max: 1, order: 205 },
swirl: { value: defaults.swirl, min: -1, max: 1, order: 280 },
noise: { value: defaults.noise, min: 0, max: 1, order: 300 },
noiseFrequency: { value: defaults.noiseFrequency, min: 0, max: 1, order: 301 },
noiseOffset: { value: defaults.noiseOffset, min: 0, max: 1, order: 302 },
lensBulge: { value: defaults.lensBulge, min: -1, max: 1, order: 400 },
lensCircle: { value: defaults.lensCircle, min: 0, max: 1, order: 402 },
grainMixer: { value: defaults.grainMixer, min: 0, max: 1, order: 409 },
grainOverlay: { value: defaults.grainOverlay, min: 0, max: 1, order: 410 },
imageX: { value: defaults.imageX, min: -1, max: 1, order: 411 },
imageY: { value: defaults.imageY, min: -1, max: 1, order: 412 },
scale: { value: defaults.scale, min: 0.1, max: 4, order: 450 },
fit: { value: defaults.fit, options: ['contain', 'cover'] as ShaderFit[], order: 451 },
Image: folder(
{
'Upload image': levaImageButton(setImageWithoutStatus),
},
{ order: 0 }
),
Presets: folder(presets, { order: -1 }),
};
});
// Reset to defaults on mount, so that Leva doesn't show values from other
// shaders when navigating (if two shaders have a color1 param for example)
useResetLevaParams(params, setParams, defaults);
useUrlParams(params, setParams, lensDistortionDef);
usePresetHighlight(lensDistortionPresets, params);
cleanUpLevaParams(params);
return (
<>
<ShaderContainer shaderDef={lensDistortionDef} currentParams={params}>
<LensDistortion onClick={handleClick} {...params} image={image} />
</ShaderContainer>
<div onClick={handleClick} className="mx-auto mt-16 mb-48 w-fit text-base text-current/70 select-none">
Click to change the sample image
</div>
<ShaderDetails shaderDef={lensDistortionDef} currentParams={params} />
</>
);
};
export default LensDistortionWithControls;
docs/src/components/copy-button.tsx
import clsx from 'clsx';
import { useRef, useState } from 'react';
interface CopyButtonProps extends React.ComponentProps<'button'> {
getText: () => string;
}
export function CopyButton({ getText, className, children, ...props }: CopyButtonProps) {
const [copied, setCopied] = useState(false);
const timeoutRef = useRef(0);
const copyIconRef = useRef<SVGSVGElement>(null);
const checkIconRef = useRef<SVGSVGElement>(null);
const handleCopy = async () => {
try {
const text = getText();
await navigator.clipboard.writeText(text);
if (!timeoutRef.current) {
const copyIcon = copyIconRef.current;
const checkIcon = checkIconRef.current;
if (copyIcon && checkIcon) {
Object.assign(copyIcon.style, {
filter: 'blur(3px)',
scale: 0.5,
opacity: 0,
});
setTimeout(() => {
Object.assign(checkIcon.style, {
filter: 'none',
scale: 1,
opacity: 1,
});
}, 100);
}
setCopied(true);
}
clearTimeout(timeoutRef.current);
timeoutRef.current = window.setTimeout(() => {
timeoutRef.current = 0;
setCopied(false);
const copyIcon = copyIconRef.current;
const checkIcon = checkIconRef.current;
if (copyIcon && checkIcon) {
Object.assign(checkIcon.style, {
filter: 'blur(3px)',
scale: 0.5,
opacity: 0,
});
Object.assign(copyIcon.style, {
filter: 'none',
scale: 1,
opacity: 1,
});
}
}, 2000);
} catch (err) {
console.error('Failed to copy text:', err);
}
};
return (
<button
aria-label={copied ? 'Copied!' : 'Copy to clipboard'}
type="button"
className={clsx('group flex cursor-pointer items-center justify-center', className)}
onClick={handleCopy}
{...props}
>
<span className="relative flex size-16 items-center justify-center will-change-transform">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentcolor"
ref={copyIconRef}
className="absolute transition-[opacity,filter,scale] duration-300 ease-out-smooth"
>
<path d="M11 4V2C11 1.48232 10.6067 1.05621 10.1025 1.00488L10 1H2C1.48232 1 1.05621 1.39333 1.00488 1.89746L1 2V10C1 10.5523 1.44772 11 2 11H4V6C4 4.89543 4.89543 4 6 4H11ZM6 5C5.48232 5 5.05621 5.39333 5.00488 5.89746L5 6V14C5 14.5523 5.44772 15 6 15H14C14.5523 15 15 14.5523 15 14V6C15 5.48232 14.6067 5.05621 14.1025 5.00488L14 5H6ZM14.2041 4.01074C15.2128 4.113 16 4.96435 16 6V14L15.9893 14.2041C15.8938 15.1457 15.1457 15.8938 14.2041 15.9893L14 16H6C4.96435 16 4.113 15.2128 4.01074 14.2041L4 14V12H2C0.96435 12 0.113005 11.2128 0.0107422 10.2041L0 10V2C1.28853e-07 0.895431 0.895431 3.22128e-08 2 0H10L10.2041 0.0107422C11.2128 0.113005 12 0.964349 12 2V4H14L14.2041 4.01074Z" />
</svg>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
className="absolute transition-[opacity,filter,scale] duration-150 ease-out-smooth"
ref={checkIconRef}
style={{ opacity: 0, filter: 'blur(3px)', scale: 0.5 }}
>
<path
d="M2.05957 8.16504L6.55957 12.9952L13.6784 3.16504"
stroke="currentcolor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span>
{children}
</button>
);
}
docs/src/components/shader-container.tsx
'use client';
import { SerializableValue, serializeParams } from '@/helpers/url-serializer';
import { ShaderDef } from '@/shader-defs/shader-def-types';
import { Leva } from 'leva';
import { CopyButton } from './copy-button';
import { useState } from 'react';
export function ShaderContainer({
children,
currentParams,
shaderDef,
}: React.PropsWithChildren<{
currentParams?: Record<string, unknown>;
shaderDef?: ShaderDef;
}>) {
return (
<div className="md:mb-24">
{shaderDef && currentParams && (
<div className="flex h-80 items-center justify-between border-t border-current/10 dark:border-current/20">
<h1 className="text-3xl font-[330] lowercase">{shaderDef.name}</h1>
<div className="hidden items-center gap-24 lg:flex">
<CopyLinkButton
shaderDef={shaderDef}
currentParams={currentParams}
className="-mx-8 flex h-32 items-center gap-8 rounded-md px-8 outline-0 outline-focus transition-colors hover:bg-backplate-2 focus-visible:outline-2 active:bg-backplate-3 squircle:rounded-lg"
/>
<a
href="https://app.paper.design"
target="_blank"
className="-mx-8 flex h-32 items-center gap-8 rounded-md px-8 outline-0 outline-focus transition-colors hover:bg-backplate-2 focus-visible:outline-2 active:bg-backplate-3 squircle:rounded-lg"
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentcolor">
<path d="M12.2041 0.0107422C13.2128 0.113003 14 0.964351 14 2V12L13.9893 12.2041C13.8938 13.1457 13.1457 13.8938 12.2041 13.9893L12 14H6V13H12C12.5523 13 13 12.5523 13 12V2C13 1.48233 12.6067 1.05623 12.1025 1.00488L12 1H2C1.48232 1 1.05621 1.39333 1.00488 1.89746L1 2V8H0V2C0 0.89543 0.89543 0 2 0H12L12.2041 0.0107422Z" />
<path d="M8 9.5V6.5C7.99921 6.36201 7.94251 6.23434 7.85143 6.14433C7.80398 6.09744 7.74949 6.06198 7.69139 6.03794C7.63244 6.01349 7.56779 6 7.5 6H4.5C4.22386 6 4 6.22386 4 6.5C4 6.77614 4.22386 7 4.5 7H6.29289L0.146453 13.1464C-0.0488175 13.3417 -0.0488175 13.6583 0.146453 13.8536C0.341713 14.0488 0.658292 14.0488 0.853552 13.8536L7 7.70711V9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5Z" />
</svg>
<span>
open <span style={{ fontFeatureSettings: '"ss01"' }}>Paper</span>
</span>
</a>
</div>
</div>
)}
<div className="relative">
<ResizableShader>{children}</ResizableShader>
<div
className="absolute -top-4 -right-332 hidden w-300 overflow-auto rounded-xl bg-(--color-leva-background) pb-4 has-[[data-leva-container]>[style*='display:none']]:hidden lg:block squircle:rounded-2xl"
style={{
boxShadow: `
rgba(58, 34, 17, 0.1) 0px 4px 40px -8px,
rgba(58, 34, 17, 0.2) 0px 12px 20px -8px,
rgba(58, 34, 17, 0.1) 0px 0px 0px 1px
`,
}}
>
<div className="-mb-14 cursor-default p-10 font-mono text-[11px]">Presets</div>
<div data-leva-container>
<Leva
fill
flat
hideCopyButton
titleBar={false}
theme={{
fonts: {
mono: 'var(--font-mono)',
},
colors: {
// Separators and slider tracks
elevation1: 'var(--color-leva-separators)',
// Main background color
elevation2: 'transparent',
// Inputs background
elevation3: 'var(--color-leva-input)',
// Button :active
accent1: 'var(--color-leva-control-pressed)',
// Buttons at rest
accent2: 'var(--color-leva-button)',
// Slider thumb hover
accent3: 'var(--color-leva-control-pressed)',
// Label and input text color
highlight2: 'var(--color-foreground)',
// Leva folder title
folderTextColor: 'var(--color-foreground)',
},
sizes: {
folderTitleHeight: '28px',
numberInputMinWidth: '7ch',
},
}}
/>
</div>
{/* <div className="flex flex-col gap-(--leva-space-colGap) border-t border-(--color-leva-separators) px-10 pt-11 pb-7 font-mono text-[11px]">
{shaderDef && currentParams && (
<CopyLinkButton
currentParams={currentParams}
shaderDef={shaderDef}
className="cursor-pointer rounded-(--leva-radii-sm) bg-(--color-leva-button) py-4.5 text-(--leva-colors-highlight3) ring-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:bg-(--color-leva-control-pressed)"
/>
)}
</div> */}
</div>
</div>
</div>
);
}
function ResizableShader({ children }: React.PropsWithChildren) {
const [canStartResize, setCanStartResize] = useState(false);
return (
<div
className="flex aspect-4/3 *:size-full *:max-h-full not-has-[[data-paper-shader]]:bg-header xs:aspect-3/2 md:aspect-16/9"
onPointerMove={(event) => setCanStartResize(event.altKey)}
onPointerLeave={() => setCanStartResize(false)}
>
<div
data-resizable={canStartResize || undefined}
className="flex overflow-hidden *:size-full data-resizable:resize [[style*='width']]:resize"
>
{children}
</div>
</div>
);
}
export function CopyLinkButton({
currentParams,
shaderDef,
className,
}: {
currentParams: Record<string, unknown>;
shaderDef: ShaderDef;
className?: string;
}) {
return (
<CopyButton
getText={() => {
const baseUrl = typeof window !== 'undefined' ? window.location.href.split('#')[0] : '';
const serialized = serializeParams(currentParams as Record<string, SerializableValue>, shaderDef.params);
return `${baseUrl}#${serialized}`;
}}
className={className}
>
copy link
</CopyButton>
);
}
docs/src/components/shader-details.tsx
'use client';
import type { ReactNode } from 'react';
import { ShaderDef, ParamOption, ParamDef } from '../shader-defs/shader-def-types';
import { CopyButton } from './copy-button';
import { hslToHex } from '@/helpers/color-utils';
import { commonParams } from '@/shader-defs/common-param-def';
const formatJsxAttribute = (key: string, value: unknown): string => {
if (value === true) {
return key;
}
if (value === false) {
return `${key}={false}`;
}
if (typeof value === 'string') {
return `${key}="${value}"`;
}
if (typeof value === 'number') {
// Format numbers with at most 2 decimal places if they have decimals
const formattedNumber = Number.isInteger(value) ? value : parseFloat(value.toFixed(2));
return `${key}={${formattedNumber}}`;
}
if (Array.isArray(value)) {
return `${key}={[${value.map((v) => JSON.stringify(v)).join(', ')}]}`;
}
if (typeof value === 'object') {
return `${key}={${JSON.stringify(value)}}`;
}
return `${key}={${JSON.stringify(value)}}`;
};
function PropsTable({ params }: { params: ParamDef[] }) {
return (
<table className="w-full text-base">
<thead>
<tr className="bg-backplate-2">
<th className="px-16 py-12 text-left align-top font-medium lowercase">Name</th>
<th className="px-16 py-12 text-left align-top font-medium lowercase">Description</th>
<th className="px-16 py-12 text-left align-top font-medium lowercase">Type</th>
<th className="px-16 py-12 text-left align-top font-medium lowercase">Values</th>
</tr>
</thead>
<tbody>
{params.map((param) => (
// The approach for column sizing and alignment is that description is w-full,
// and everything else has a min width to not be crushed by the description
<tr key={param.name} className="border-table-border not-last:border-b">
{/* "noiseFrequency" is the longest name (116px + 32px padding = 148px)
We go a little smaller on mobile to have less whitespace ("maxPixelCount" = 140px) */}
<td className="min-w-140 px-16 py-12 align-top font-medium sm:min-w-148">{param.name}</td>
<td className="w-full min-w-240 px-16 py-12 align-top text-pretty text-current/70">{param.description}</td>
{/* "number | string" is the longest most common type (118px + 32px padding = 150px)
There are a few "HTMLImageElement | string ", which are purposely not aligned because too wide */}
<td className="min-w-150 px-16 py-12 align-top text-sm whitespace-nowrap text-current/70">
<code>{param.type}</code>
</td>
<td className="min-w-240 px-16 py-12 align-top text-sm text-current/70">
{param.options && param.options.length > 0 ? (
typeof param.options[0] === 'string' ? (
<div className="flex flex-wrap text-pretty">
{(param.options as string[]).map((option) => (
<span
key={option}
className={param.type === 'boolean' || param.type === 'enum' ? 'whitespace-nowrap' : ''}
>
{<span className="text-stone-400 mx-4"> | </span>}
<code className="font-mono">{param.type === 'enum' ? `"${option}"` : option}</code>
</span>
))}
</div>
) : (
<ul className="space-y-4">
{(param.options as ParamOption[]).map((option) => (
<li key={option.name}>
<code className="font-mono">{param.type === 'enum' ? `"${option.name}"` : option.name}</code>{' '}
<span className="text-stone-400">-</span> {option.description}
</li>
))}
</ul>
)
) : param.min !== undefined && param.max !== undefined ? (
<>
<span className="whitespace-nowrap">
<span className="font-mono">{param.min}</span>
{' to '}
<span className="font-mono">{param.max}</span>
</span>
{param.step === 1 && ' (integer)'}
</>
) : param.isColor ? (
<span className="whitespace-nowrap">Hex, RGB, or HSL color</span>
) : param.name === 'image' ? (
<span className="whitespace-nowrap">Image object or URL</span>
) : (
<span className="text-current/40">—</span>
)}
</td>
</tr>
))}
</tbody>
</table>
);
}
export function ShaderDetails({
shaderDef,
currentParams,
notes,
codeSampleImageName,
}: {
shaderDef: ShaderDef;
currentParams: Record<string, unknown>;
notes?: ReactNode;
codeSampleImageName?: string;
}) {
const componentName = shaderDef.name.replace(/ /g, '');
const installationCode = 'npm i @paper-design/shaders-react';
const image = codeSampleImageName
? `https://shaders.paper.design/${codeSampleImageName}`
: 'https://paper.design/flowers.webp';
const code = `import { ${componentName} } from '@paper-design/shaders-react';
<${componentName}
width={1280}
height={720}${shaderDef.params.find((p) => p.name === 'image') ? `\n image="${image}"` : ''}
${Object.entries(currentParams)
.filter(([key, value]) => {
if (['offsetX', 'offsetY', 'rotation'].includes(key) && value === 0) {
return false;
}
if (key === 'scale' && value === 1) {
return false;
}
return true;
})
.map(([key, value]) => {
const isColor = shaderDef.params.find((p) => p.name === key && p.isColor);
if (!isColor) {
return formatJsxAttribute(key, value);
} else if (typeof value === 'string') {
return formatJsxAttribute(key, hslToHex(value));
} else if (Array.isArray(value)) {
return formatJsxAttribute(
key,
value.map((v) => hslToHex(v))
);
}
})
.join('\n ')}
/>
`;
const commonPropNames = Object.keys(commonParams);
const shaderProps = shaderDef.params.filter((p) => !commonPropNames.includes(p.name));
const commonProps = shaderDef.params.filter((p) => commonPropNames.includes(p.name));
return (
<div className="mt-24 flex w-full flex-col gap-32 md:mt-40 [&_a]:link [&>section]:flex [&>section]:flex-col [&>section]:gap-16">
<section>
<div className="flex items-center gap-8">
<h2 className="text-2xl font-medium lowercase">Installation</h2>
<CopyButton
className="-mt-14 -mb-16 size-32 rounded-md outline-0 outline-focus transition-colors hover:bg-backplate-1 focus-visible:outline-2 active:bg-backplate-2 squircle:rounded-lg"
getText={() => installationCode}
/>
</div>
<pre className="no-scrollbar w-full overflow-x-auto rounded-xl bg-backplate-1 p-24 text-code squircle:rounded-2xl">
{installationCode}
</pre>
</section>
<section>
<div className="flex items-center gap-8">
<h2 className="text-2xl font-medium lowercase">Code</h2>
<CopyButton
className="-mt-14 -mb-16 size-32 rounded-md outline-0 outline-focus transition-colors hover:bg-backplate-1 focus-visible:outline-2 active:bg-backplate-2 squircle:rounded-lg"
getText={() => code}
/>
</div>
<div className="flex flex-col gap-8">
<pre className="custom-scrollbar overflow-x-auto rounded-xl bg-backplate-1 p-24 text-code squircle:rounded-2xl">
{code}
</pre>
</div>
</section>
<section>
<div className="flex flex-col gap-16">
<h2 className="text-2xl font-medium lowercase">Shader Props</h2>
<div className="custom-scrollbar overflow-x-auto rounded-xl bg-backplate-1 squircle:rounded-2xl">
<PropsTable params={shaderProps} />
</div>
</div>
</section>
<section>
<div className="flex flex-col gap-16">
<h2 className="text-2xl font-medium lowercase">Common Props</h2>
<div className="custom-scrollbar overflow-x-auto rounded-xl bg-backplate-1 squircle:rounded-2xl">
<PropsTable params={commonProps} />
</div>
</div>
</section>
{shaderDef.description && (
<section>
<h2 className="text-2xl font-medium lowercase">Description</h2>
<p className="text-pretty text-current/70">{shaderDef.description}</p>
</section>
)}
{notes && (
<section>
<h2 className="text-2xl font-medium lowercase">Notes</h2>
<p className="text-pretty text-current/70">{notes}</p>
</section>
)}
</div>
);
}
docs/src/helpers/clean-up-leva-params.ts
// Remove presets from params so they are not passed as props
export const cleanUpLevaParams = (params: Record<string, unknown>) => {
for (const key of Object.keys(params)) {
if (key === 'default' || key.match(/^[A-Z]/)) {
delete params[key];
}
}
};
docs/src/helpers/color-utils.ts
import { getShaderColorFromString } from '@paper-design/shaders';
import {
convertRgbToHsl,
convertHslToRgb,
parseHex,
parseHsl,
parseHslLegacy,
serializeHex,
serializeHex8,
Hsl,
} from 'culori/fn';
const formatHsla = (hslColor: Hsl): string => {
const h = Math.round(hslColor.h ?? 0);
const s = Math.round((hslColor.s ?? 0) * 100);
const l = Math.round((hslColor.l ?? 0) * 100);
const alpha = Math.round((hslColor.alpha ?? 1) * 100) / 100;
return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
};
export const toHsla = (value: string): string => {
if (value.startsWith('hsla')) {
return value;
}
const [r, g, b, alpha] = getShaderColorFromString(value);
const rgbColor = { mode: 'rgb' as const, r, g, b, alpha };
const hslColor = convertRgbToHsl(rgbColor);
if (!hslColor) {
throw new Error(`Invalid RGB color: ${JSON.stringify(rgbColor)}`);
}
return formatHsla(hslColor);
};
export const hslToHex = (hslString: string): string => {
const hslColor = parseHsl(hslString) || parseHslLegacy(hslString);
if (!hslColor) {
throw new Error(`Invalid HSL string: ${hslString}`);
}
const rgbColor = convertHslToRgb(hslColor);
if (!rgbColor) {
throw new Error(`Invalid HSL color: ${JSON.stringify(hslColor)}`);
}
const hasAlpha = rgbColor.alpha !== undefined && rgbColor.alpha !== 1;
return hasAlpha ? serializeHex8(rgbColor) : serializeHex(rgbColor);
};
export const hexToHsl = (hex: string): string => {
const rgbColor = parseHex(hex);
if (!rgbColor) {
throw new Error(`Invalid Hex string: ${hex}`);
}
const hslColor = convertRgbToHsl(rgbColor);
if (!hslColor) {
throw new Error(`Invalid RGB color: ${JSON.stringify(rgbColor)}`);
}
return formatHsla(hslColor);
};
docs/src/helpers/leva-image-button.ts
import { button } from 'leva';
export function levaImageButton(onLoad: (image: HTMLImageElement) => void) {
return button(() => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = (event) => {
const file = (event.target as HTMLInputElement).files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const image = new Image();
image.src = e.target?.result as string;
image.onload = () => onLoad(image);
};
reader.readAsDataURL(file);
}
};
input.click();
});
}
export function levaDeleteImageButton(onLoad: (image?: HTMLImageElement) => void) {
return button(() => {
const img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
img.onload = () => onLoad(img);
});
}
docs/src/helpers/url-serializer.ts
import { hslToHex, hexToHsl } from './color-utils';
import type { ParamDef } from '../shader-defs/shader-def-types';
export type SerializableValue = string | number | boolean | string[] | number[];
export const serializeParams = (params: Record<string, SerializableValue>, paramDefs: ParamDef[]): string => {
const parts = Object.entries(params).map(([key, value]) => {
const paramDef = paramDefs.find((def) => def.name === key);
if (!paramDef) {
throw new Error(`Parameter definition not found: ${key}`);
}
const isColor = paramDef.isColor;
let serialized: string;
if (typeof value === 'boolean') {
serialized = value ? 'true' : 'false';
return `${key}=${serialized}`;
}
if (typeof value === 'number') {
const formattedNumber = Number.isInteger(value) ? value : parseFloat(value.toFixed(2));
serialized = formattedNumber.toString();
return `${key}=${serialized}`;
}
if (typeof value === 'string') {
serialized = isColor ? hslToHex(value).slice(1) : value;
return `${key}=${serialized}`;
}
if (Array.isArray(value)) {
serialized = value
.map((v) => {
const str = String(v);
return isColor ? hslToHex(str).slice(1) : str;
})
.join(',');
return `${key}=${serialized}`;
}
throw new Error(`Unsupported value type: ${typeof value}`);
});
return parts.join('&');
};
const deserializeValue = (str: string, def: ParamDef): SerializableValue => {
if (def.type === 'boolean') {
return str === 'true';
}
if (def.type === 'number') {
return Number(str);
}
if (def.type === 'string[]') {
const items = str.includes(',') ? str.split(',') : [str];
if (def.isColor) {
return items.map((s) => hexToHsl(`#${s}`));
}
return items;
}
if (def.type === 'number[]') {
const items = str.includes(',') ? str.split(',') : [str];
return items.map((s) => Number(s));
}
if (def.type === 'string' && def.isColor) {
return hexToHsl(`#${str}`);
}
return str;
};
export const deserializeParams = (serialized: string, paramDefs: ParamDef[]): Record<string, SerializableValue> =>
serialized.split('&').reduce(
(result, pair) => {
const separatorIndex = pair.indexOf('=');
if (separatorIndex === -1) {
throw new Error(`Invalid parameter pair: ${pair}`);
}
const key = pair.slice(0, separatorIndex);
const str = pair.slice(separatorIndex + 1);
const paramDef = paramDefs.find((def) => def.name === key);
if (!paramDef) {
throw new Error(`Parameter definition not found: ${key}`);
}
result[key] = deserializeValue(str, paramDef);
return result;
},
{} as Record<string, SerializableValue>
);
docs/src/helpers/use-preset-highlight.ts
import { useEffect } from 'react';
export const usePresetHighlight = (presets: Record<string, any>[], levaParams: Record<string, any>) => {
useEffect(() => {
const highlightPreset = () => {
const matchingPreset = presets.find((preset) => {
// Remove any property that should not be compared for matching
const { frame, ...paramsToCompare } = preset.params;
return Object.entries(paramsToCompare).every(([key, value]) => {
const levaValue = levaParams[key as keyof typeof levaParams];
const presetValue =
typeof value === 'string' && value.startsWith('hsla') && value.endsWith(', 1)')
? value.replace('hsla', 'hsl').slice(0, -4) + ')'
: value;
if (key === 'speed') {
return presetValue === levaValue * (levaParams.reverse ? -1 : 1);
}
return presetValue === levaValue;
});
});
presets.forEach((preset, presetIndex) => {
const buttons = document.querySelectorAll<HTMLButtonElement>(`#leva__root button`);
if (buttons.length > 0) {
if (preset === matchingPreset) {
buttons[presetIndex].style.backgroundColor = 'var(--leva-colors-elevation3)';
} else {
buttons[presetIndex].style.backgroundColor = 'var(--leva-colors-elevation1)';
}
}
});
};
// Leva takes a little longer to mount on some examples, so buttons are not present at the time of the
// first render. Delaying this hook with a timeout to ensure the buttons are present.
const timeoutId = setTimeout(highlightPreset, 1);
return () => clearTimeout(timeoutId);
}, [levaParams, presets]);
};
docs/src/helpers/use-reset-leva-params.ts
import { useEffect } from 'react';
/** Leva will try to cache values for params with the same name, so we need to explicitly reset params to defaults when a new example is mounted */
export function useResetLevaParams(params: any, setParams: any, defaults: any) {
useEffect(() => {
// We don't reset to defaults if there is a shader config in the URL
if (window.location.hash) {
return;
}
setParamsSafe(params, setParams, defaults);
}, [defaults]);
}
/** Leva throws an error if you try to set an object with keys it doesn't already have, so we need to prune them off before setting */
export function setParamsSafe(params: any, setParams: any, defaults: any, setImage?: (img: HTMLImageElement) => void) {
const newParamObject: Record<string, any> = {};
// We need to prune off any extra keys from the defaults if there isn't a leva control for it
// Not all shaders have leva controls for all params, like frame is often not needed
// But leva will throw an error if we try to set a param for a control that doesn't exist
for (const [key, value] of Object.entries(defaults)) {
if (key in params) {
newParamObject[key] = value;
}
}
setParams(newParamObject);
// Handle preset image if provided (image loader is separate from Leva controls)
if (defaults.image && typeof defaults.image === 'string' && setImage) {
const img = new Image();
img.src = defaults.image;
img.onload = () => {
setImage(img);
};
}
}
docs/src/helpers/use-url-params.ts
'use client';
import { useEffect } from 'react';
import { deserializeParams } from './url-serializer';
import { setParamsSafe } from './use-reset-leva-params';
import type { ShaderDef } from '../shader-defs/shader-def-types';
export const useUrlParams = (
params: any,
setParams: any,
shaderDef: ShaderDef,
setColors?: (colors: string[]) => void
) => {
useEffect(() => {
const hashContent = window.location.hash.slice(1); // Remove #
if (!hashContent) {
return;
}
let urlParams;
try {
urlParams = deserializeParams(hashContent, shaderDef.params);
} catch (error) {
console.warn('Failed to parse URL parameters:', error);
}
if (!urlParams || Object.keys(urlParams).length === 0) {
return;
}
if (setColors) {
const colorArrayParam = shaderDef.params.find((param) => param.type === 'string[]' && param.isColor);
if (colorArrayParam && urlParams[colorArrayParam.name]) {
const colorsValue = urlParams[colorArrayParam.name];
const colorsArray = Array.isArray(colorsValue) ? colorsValue : [colorsValue];
setColors(colorsArray as string[]);
}
}
setParamsSafe(params, setParams, urlParams);
// Clear hash from URL
const url = new URL(window.location.href);
url.hash = '';
window.history.replaceState({}, '', url.toString());
}, [params, setParams, setColors, shaderDef]);
};
docs/src/index.css
@import 'tailwindcss';
@theme {
--spacing: 1px;
--default-font-family: 'Matter', system-ui, sans-serif;
--font-mono: 'Paper Mono', ui-monospace, monospace;
--color-*: initial;
--color-white: white;
--color-black: black;
--color-transparent: transparent;
--color-background: light-dark(#fff, #000000);
--color-foreground: light-dark(#222, #f0efe4);
--color-blue: oklch(74% 0.104 258);
--color-cream: #f0efe4;
--color-header: light-dark(var(--color-cream), var(--color-background));
--color-code: light-dark(#222, #cdccc0);
--color-backplate-1: light-dark(--alpha(var(--color-cream) / 60%), #181818);
--color-backplate-2: light-dark(#e9e8e0, #2a2a2a);
--color-backplate-3: light-dark(#dddbd2, #373737);
--color-focus: light-dark(oklch(0.74 0.12 258), oklch(0.73 0.2 258 / 60%));
/* Can't use transparent colors in tables because Safari overlays them twice */
--color-table-border: light-dark(#e2e1d8, #2a2a2a);
--text-3xl: 1.75rem;
--breakpoint-xs: 28rem;
--breakpoint-2xl: 85rem;
--breakpoint-3xl: 116rem;
--color-selection: oklch(78% 35% 258 / 50%);
--ease-out-smooth: cubic-bezier(0.685, 0.89, 0.315, 0.995);
}
/* Non-Tailwind colors */
@layer theme {
:root {
--color-leva-background: light-dark(#f4f3eb, #2a2a2a);
--color-leva-input: light-dark(#dddbd2, #373737);
--color-leva-input-focused: light-dark(#f8f8f6, #373737);
--color-leva-separators: light-dark(#e2e1d8, #3c3c3c);
--color-leva-button: light-dark(#999997, #777775);
--color-leva-control-pressed: #777775;
}
}
@utility no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
@font-face {
font-family: Matter;
font-style: normal;
font-display: swap;
src: url('https://paper.design/matter.woff2') format('woff2');
}
@font-face {
font-family: 'Paper Mono';
font-style: normal;
font-display: swap;
src: url('https://paper.design/paper-mono-0.100.woff2') format('woff2');
}
::selection {
background-color: var(--color-selection);
}
@layer base {
:root {
color-scheme: light dark;
font-size: 16px; /* Always 16px base */
background-color: light-dark(var(--color-cream), var(--color-background)); /* Overscroll background */
}
body {
min-height: 100dvh;
font-family: var(--default-font-family);
color: var(--color-foreground);
text-size-adjust: none;
font-size: 18px;
line-height: calc(4 / 3);
/* Note: don't put global background color here, iOS 26.0 uses it for the header overscroll (ignoring theme meta) */
/* Instead use a separate container element in the root layout for background */
}
pre {
font-family: 'Paper Mono', monospace;
font-size: 14px;
line-height: 26px;
}
code {
font-size: 0.9em;
}
}
@custom-variant squircle {
@media (min-resolution: 2x) {
@supports (corner-shape: squircle) {
& {
corner-shape: squircle;
@slot;
}
}
}
}
@utility pixelated {
image-rendering: pixelated;
}
@utility link {
text-decoration: underline;
text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: round(up, 0.2em, 0.5px);
@media (hover: hover) {
&:hover {
text-decoration-color: color-mix(in oklab, currentcolor 70%, transparent);
}
}
}
@utility custom-scrollbar {
&::-webkit-scrollbar {
height: 6px;
width: 0px; /* Hide the vertical scrollbar, which may appear on Safari when resizing the page */
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #909090;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #777772;
}
}
@layer components {
[data-leva-container] {
& > * {
background-color: transparent !important;
}
& div:has(> div > button) {
column-gap: 8px;
margin-top: 8px;
margin-bottom: 4px;
& > div {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
& div:has(> div:nth-child(2) > button) {
grid-template-columns: 1fr 1fr !important;
}
& ::after {
--leva-borderWidths-folder: 0px;
}
& [class*='isRoot-false'] {
padding-left: 0 !important;
}
& button {
user-select: none;
box-shadow: none !important;
&:focus-visible {
outline: 2px solid var(--color-focus) !important;
outline-offset: 2px;
}
}
& select:focus-visible + * {
outline: 2px solid var(--color-focus) !important;
outline-offset: 2px;
}
/* Leva renders an opacity:0 native <select> over a fake div. The native
dropdown popup it opens has no colors set, so in dark mode it paints
dark text on a dark background. Give the select + options explicit,
theme-aware colors so the popup stays readable. */
& select {
color: var(--color-foreground);
background-color: var(--color-leva-background);
}
& select option {
color: var(--color-foreground);
background-color: var(--color-leva-background);
}
& div:has(> input):hover {
box-shadow: none !important;
}
& div:has(> input):focus-within {
box-shadow: none !important;
outline: 2px solid var(--color-focus) !important;
outline-offset: -1px;
background-color: var(--color-leva-input-focused) !important;
}
& [style*='height']:not([style*='overflow: hidden']) {
height: auto !important;
}
& [style*='--leva-colors-folderWidgetColor'] {
margin-top: 0 !important;
& > :first-child {
display: none !important;
}
}
& ::selection {
background-color: var(--color-selection) !important;
}
}
}
::-webkit-resizer {
display: none;
}
docs/src/shader-defs/common-param-def.ts
import type { ParamDef } from './shader-def-types';
type CommonParamDef = Omit<ParamDef, 'defaultValue'>;
export const commonParams: Record<string, CommonParamDef> = {
speed: {
name: 'speed',
type: 'number',
description: 'Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds',
},
frame: {
name: 'frame',
type: 'number',
description: 'Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader',
},
scale: {
name: 'scale',
type: 'number',
min: 0.01,
max: 4,
description: 'Overall zoom level of the graphics',
},
rotation: {
name: 'rotation',
type: 'number',
min: 0,
max: 360,
description: 'Overall rotation angle of the graphics',
},
offsetX: {
name: 'offsetX',
type: 'number',
min: -1,
max: 1,
description: 'Horizontal offset of the graphics center',
},
offsetY: {
name: 'offsetY',
type: 'number',
min: -1,
max: 1,
description: 'Vertical offset of the graphics center',
},
width: {
name: 'width',
type: 'number | string',
description: 'CSS width style of the shader element',
},
height: {
name: 'height',
type: 'number | string',
description: 'CSS height style of the shader element',
},
fit: {
name: 'fit',
type: 'enum',
description: 'How to fit the rendered shader into the canvas dimensions',
options: ['contain', 'cover'],
},
worldWidth: {
name: 'worldWidth',
type: 'number',
description: "Virtual width of the graphic before it's scaled to fit the canvas",
},
worldHeight: {
name: 'worldHeight',
type: 'number',
description: "Virtual height of the graphic before it's scaled to fit the canvas",
},
originX: {
name: 'originX',
type: 'number',
min: 0,
max: 1,
description: 'Reference point for positioning world width in the canvas',
},
originY: {
name: 'originY',
type: 'number',
min: 0,
max: 1,
description: 'Reference point for positioning world height in the canvas',
},
minPixelRatio: {
name: 'minPixelRatio',
type: 'number',
description: 'Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)',
},
maxPixelCount: {
name: 'maxPixelCount',
type: 'number',
description: 'Maximum pixel count that the shader may process',
},
};
export const animatedCommonParams: CommonParamDef[] = [
commonParams.speed,
commonParams.frame,
commonParams.scale,
commonParams.rotation,
commonParams.offsetX,
commonParams.offsetY,
commonParams.width,
commonParams.height,
commonParams.fit,
commonParams.worldWidth,
commonParams.worldHeight,
commonParams.originX,
commonParams.originY,
commonParams.minPixelRatio,
commonParams.maxPixelCount,
];
export const staticCommonParams: CommonParamDef[] = [
commonParams.scale,
commonParams.rotation,
commonParams.offsetX,
commonParams.offsetY,
commonParams.width,
commonParams.height,
commonParams.fit,
commonParams.worldWidth,
commonParams.worldHeight,
commonParams.originX,
commonParams.originY,
commonParams.minPixelRatio,
commonParams.maxPixelCount,
];
// Image-based shaders get a higher scale floor: below 0.1 the source image is a speck
export const staticImageCommonParams: CommonParamDef[] = [
{ ...commonParams.scale, min: 0.1 },
commonParams.rotation,
commonParams.offsetX,
commonParams.offsetY,
commonParams.width,
commonParams.height,
commonParams.fit,
commonParams.originX,
commonParams.originY,
commonParams.minPixelRatio,
commonParams.maxPixelCount,
];
// Image-based shaders get a higher scale floor: below 0.1 the source image is a speck
export const animatedImageCommonParams: CommonParamDef[] = [
commonParams.speed,
commonParams.frame,
{ ...commonParams.scale, min: 0.1 },
commonParams.rotation,
commonParams.offsetX,
commonParams.offsetY,
commonParams.width,
commonParams.height,
commonParams.fit,
commonParams.originX,
commonParams.originY,
commonParams.minPixelRatio,
commonParams.maxPixelCount,
];
docs/src/shader-defs/lens-distortion-def.ts
import { lensDistortionPresets } from '@paper-design/shaders-react';
import type { ShaderDef } from './shader-def-types';
import { staticImageCommonParams } from './common-param-def';
const defaultParams = lensDistortionPresets[0].params;
export const lensDistortionDef: ShaderDef = {
name: 'Lens Distortion',
description:
'Lens Distortion image filter separates an image into shifting color layers (recreating the chromatic aberration of a lens) and warps the image geometry itself, curving it outward or inward like barrel and pincushion distortion.',
params: [
{
name: 'image',
type: 'HTMLImageElement | string',
description: 'The image to use for the effect',
},
{
name: 'spread',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.spread,
description:
'Strength of the color split - how far the color layers are pushed apart. This is the master dial for the chromatic aberration; at 0 there is no split and all the other color controls do nothing',
},
{
name: 'bias',
type: 'number',
min: -1,
max: 1,
defaultValue: defaultParams.bias,
description:
'Bias of the color spread: warps how the colors distribute along it. 0 spaces them evenly; toward +/-1 they bunch toward one end of the fan and spread out at the other (needs spread > 0, count > 2)',
},
{
name: 'angle',
type: 'number',
min: 0,
max: 360,
defaultValue: defaultParams.angle,
description: 'Angle of the color spread in degrees (needs spread > 0, perspective < 1)',
},
{
name: 'perspective',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.perspective,
description:
'Perspective of the spread: shapes its direction from a straight line to a radial burst. At 0 all layers spread along the straight line set by angle; at 1 they radiate outward from the centre (needs spread > 0)',
},
{
name: 'count',
type: 'number',
min: 2,
max: 50,
step: 1,
defaultValue: defaultParams.count,
description:
'Number of colored layers making the spread - more layers blend into a blur, fewer stay as separate ghosted copies (needs spread > 0)',
},
{
name: 'dispersion',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.dispersion,
description:
'Overall amount of color dispersion: at 1 each layer takes its own color from the spectrum, giving the chromatic aberration look; at 0 every layer keeps the original image color, so the spread reads as a plain blur (needs spread > 0)',
},
{
name: 'dispersionShift',
type: 'number',
min: -1,
max: 1,
defaultValue: defaultParams.dispersionShift,
description:
'Balances the dispersion between a soft circular zone at the centre of the image and the rest of it: 0 applies it evenly over the whole image, -1 keeps it in the centre only, 1 keeps it at the edges only (needs spread > 0, dispersion > 0)',
},
{
name: 'dispersionColor',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.dispersionColor,
description:
'Rotates the colors around the hue wheel, 0 to 1 for a full turn (needs spread > 0, dispersion > 0)',
},
{
name: 'focusCenter',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.focusCenter,
description:
'Reduces the spread distance in a circular zone at the centre of the image. 0 keeps the full layers spread in the middle, higher values move the layers closer building an illusion of focus (needs spread > 0)',
},
{
name: 'focusEdges',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.focusEdges,
description:
'Reduces the spread distance along the image edges. 0 keeps the full layers spread at the edges, 1 restores the original image at the edges regardless of the chosen spread distance (needs spread > 0)',
},
{
name: 'swirl',
type: 'number',
min: -1,
max: 1,
defaultValue: defaultParams.swirl,
description:
'Bends the spread around the centre of the image, so the layers trail along circles like a vortex. Each layer is rotated around the centre by an angle growing along the spread, and the effect fades out beyond the inscribed circle (needs spread > 0)',
},
{
name: 'noise',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.noise,
description: 'Noise distortion over the spread direction within the spread distance (needs spread > 0)',
},
{
name: 'noiseFrequency',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.noiseFrequency,
description:
'Noise frequency (scale), higher value gives more detailed distortion (needs spread > 0, noise > 0)',
},
{
name: 'noiseOffset',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.noiseOffset,
description:
'Shifts the noise pattern diagonally, can be used as a seed to get a different scatter (needs spread > 0, noise > 0)',
},
{
name: 'lensBulge',
type: 'number',
min: -1,
max: 1,
defaultValue: defaultParams.lensBulge,
description:
'Lens warp of the image geometry, applied before the color spread. 0 is flat, positive bulges out like a fisheye, negative pinches in like a pincushion. Strong positive values fade out the corners of the image',
},
{
name: 'lensCircle',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.lensCircle,
description:
'Squeezes pixels outside the circle inward. 0 is off, 1 gives the image exact circular shape with any lensBulge value. Near the rim it also turns the spread radial and damps it, keeping the circular edge clean',
},
{
name: 'grainMixer',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.grainMixer,
description:
'Scatters the spread with grain noise, breaking up the edges of the colored layers (needs spread > 0)',
},
{
name: 'grainOverlay',
type: 'number',
min: 0,
max: 1,
defaultValue: defaultParams.grainOverlay,
description: 'Post-processing b/w grain overlay',
},
{
name: 'imageX',
type: 'number',
min: -1,
max: 1,
defaultValue: defaultParams.imageX,
description: 'Pans the image horizontally behind the effect, without moving the effect itself. 0 is centred',
},
{
name: 'imageY',
type: 'number',
min: -1,
max: 1,
defaultValue: defaultParams.imageY,
description: 'Pans the image vertically behind the effect, without moving the effect itself. 0 is centred',
},
...staticImageCommonParams,
],
};
docs/src/shader-defs/shader-def-types.ts
export interface ParamOption {
name: string;
description: string;
}
export interface ParamDef {
name: string;
type: string;
min?: number;
max?: number;
step?: number;
defaultValue?: unknown;
description: string;
options?: ParamOption[] | string[];
isColor?: boolean;
}
export interface ShaderDef {
name: string;
description: string;
params: ParamDef[];
}
packages/shaders-react/src/color-props-are-equal.ts
interface PropsWithColors {
colors?: string[];
[key: string]: unknown;
}
export function colorPropsAreEqual(prevProps: PropsWithColors, nextProps: PropsWithColors): boolean {
if (Object.keys(prevProps).length !== Object.keys(nextProps).length) {
return false;
}
for (const key in prevProps) {
if (key === 'colors') {
const prevIsArray = Array.isArray(prevProps.colors);
const nextIsArray = Array.isArray(nextProps.colors);
if (!prevIsArray || !nextIsArray) {
if (Object.is(prevProps.colors, nextProps.colors) === false) {
return false;
}
continue;
}
if (prevProps.colors?.length !== nextProps.colors?.length) {
return false;
}
if (!prevProps.colors?.every((color, index) => color === nextProps.colors?.[index])) {
return false;
}
continue;
}
if (Object.is(prevProps[key], nextProps[key]) === false) {
return false;
}
}
return true;
}
packages/shaders-react/src/index.ts
'use client';
export { ShaderMount } from './shader-mount.js';
export type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';
export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';
export type { MeshGradientProps } from './shaders/mesh-gradient.js';
export type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';
export { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';
export type { SmokeRingProps } from './shaders/smoke-ring.js';
export type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';
export { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';
export type { NeuroNoiseProps } from './shaders/neuro-noise.js';
export type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';
export { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';
export type { DotOrbitProps } from './shaders/dot-orbit.js';
export type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';
export { DotGrid, dotGridPresets } from './shaders/dot-grid.js';
export type { DotGridProps } from './shaders/dot-grid.js';
export type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';
export { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';
export type { SimplexNoiseProps } from './shaders/simplex-noise.js';
export type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';
export { Metaballs, metaballsPresets } from './shaders/metaballs.js';
export type { MetaballsProps } from './shaders/metaballs.js';
export type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';
export { Waves, wavesPresets } from './shaders/waves.js';
export type { WavesProps } from './shaders/waves.js';
export type { WavesUniforms, WavesParams } from '@paper-design/shaders';
export { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';
export type { PerlinNoiseProps } from './shaders/perlin-noise.js';
export type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';
export { Voronoi, voronoiPresets } from './shaders/voronoi.js';
export type { VoronoiProps } from './shaders/voronoi.js';
export type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';
export { Warp, warpPresets } from './shaders/warp.js';
export type { WarpProps } from './shaders/warp.js';
export type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';
export { GodRays, godRaysPresets } from './shaders/god-rays.js';
export type { GodRaysProps } from './shaders/god-rays.js';
export type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';
export { Spiral, spiralPresets } from './shaders/spiral.js';
export type { SpiralProps } from './shaders/spiral.js';
export type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';
export { Swirl, swirlPresets } from './shaders/swirl.js';
export type { SwirlProps } from './shaders/swirl.js';
export type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';
export { Dithering, ditheringPresets } from './shaders/dithering.js';
export type { DitheringProps } from './shaders/dithering.js';
export type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';
export { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';
export type { GrainGradientProps } from './shaders/grain-gradient.js';
export type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';
export { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';
export type { PulsingBorderProps } from './shaders/pulsing-border.js';
export type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';
export { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';
export type { ColorPanelsProps } from './shaders/color-panels.js';
export type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';
export { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';
export type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';
export type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';
export { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';
export type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';
export type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';
export { PaperTexture, paperTexturePresets } from './shaders/paper-texture.js';
export type { PaperTextureProps } from './shaders/paper-texture.js';
export type { PaperTextureUniforms, PaperTextureParams } from '@paper-design/shaders';
export { FlutedGlass, flutedGlassPresets } from './shaders/fluted-glass.js';
export { type FlutedGlassProps } from './shaders/fluted-glass.js';
export { type FlutedGlassUniforms, type FlutedGlassParams } from '@paper-design/shaders';
export { Water, waterPresets } from './shaders/water.js';
export type { WaterProps } from './shaders/water.js';
export type { WaterUniforms, WaterParams } from '@paper-design/shaders';
export { ImageDithering, imageDitheringPresets } from './shaders/image-dithering.js';
export type { ImageDitheringProps } from './shaders/image-dithering.js';
export type { ImageDitheringUniforms, ImageDitheringParams } from '@paper-design/shaders';
export { LensDistortion, lensDistortionPresets } from './shaders/lens-distortion.js';
export type { LensDistortionProps } from './shaders/lens-distortion.js';
export type { LensDistortionUniforms, LensDistortionParams } from '@paper-design/shaders';
export { Heatmap, heatmapPresets } from './shaders/heatmap.js';
export type { HeatmapProps } from './shaders/heatmap.js';
export type { HeatmapUniforms, HeatmapParams } from '@paper-design/shaders';
export { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';
export type { LiquidMetalProps } from './shaders/liquid-metal.js';
export type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';
export { HalftoneDots, halftoneDotsPresets } from './shaders/halftone-dots.js';
export type { HalftoneDotsProps } from './shaders/halftone-dots.js';
export type { HalftoneDotsUniforms, HalftoneDotsParams } from '@paper-design/shaders';
export { HalftoneCmyk, halftoneCmykPresets } from './shaders/halftone-cmyk.js';
export type { HalftoneCmykProps } from './shaders/halftone-cmyk.js';
export type { HalftoneCmykUniforms, HalftoneCmykParams } from '@paper-design/shaders';
export { GemSmoke, gemSmokePresets } from './shaders/gem-smoke.js';
export type { GemSmokeProps } from './shaders/gem-smoke.js';
export type { GemSmokeUniforms, GemSmokeParams } from '@paper-design/shaders';
export { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';
export type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';
export {
colorPanelsMeta,
dotOrbitMeta,
godRaysMeta,
grainGradientMeta,
meshGradientMeta,
metaballsMeta,
paperTextureMeta,
pulsingBorderMeta,
simplexNoiseMeta,
smokeRingMeta,
swirlMeta,
voronoiMeta,
warpMeta,
heatmapMeta,
lensDistortionMeta,
staticMeshGradientMeta,
staticRadialGradientMeta,
} from '@paper-design/shaders';
packages/shaders-react/src/set-min-image-size.tsx
/**
* Resize the image to at least 1024px on the shorter side.
* Makes sure that vector images are converted to bitmaps at an acceptable resolution.
*/
export function setMinImageSize(img: HTMLImageElement): void {
if (img.naturalWidth < 1024 && img.naturalHeight < 1024) {
if (img.naturalWidth < 1 || img.naturalHeight < 1) {
// Skip weird sizes
return;
}
const aspect = img.naturalWidth / img.naturalHeight;
img.width = Math.round(aspect > 1 ? 1024 * aspect : 1024);
img.height = Math.round(aspect > 1 ? 1024 : 1024 / aspect);
}
}
packages/shaders-react/src/shader-mount.tsx
'use client';
import { useEffect, useRef, forwardRef, useState } from 'react';
import {
ShaderMount as ShaderMountVanilla,
emptyPixel,
type PaperShaderElement,
type ShaderMotionParams,
type ShaderMountUniforms,
} from '@paper-design/shaders';
import { useMergeRefs } from './use-merge-refs.js';
import { setMinImageSize } from './set-min-image-size.js';
/**
* React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images
*
* We accept undefined as a convenience for server rendering, when some things may be undefined
* We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
*/
interface ShaderMountUniformsReact {
[key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;
}
export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {
ref?: React.Ref<PaperShaderElement>;
fragmentShader: string;
uniforms: ShaderMountUniformsReact;
mipmaps?: string[];
minPixelRatio?: number;
maxPixelCount?: number;
webGlContextAttributes?: WebGLContextAttributes;
/** Inline CSS width style */
width?: string | number;
/** Inline CSS height style */
height?: string | number;
}
export interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {
ref?: React.Ref<PaperShaderElement>;
minPixelRatio?: number;
maxPixelCount?: number;
webGlContextAttributes?: WebGLContextAttributes;
/** Inline CSS width style */
width?: string | number;
/** Inline CSS height style */
height?: string | number;
}
/** Parse the provided uniforms, turning URL strings into loaded images */
async function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {
const processedUniforms = {} as ShaderMountUniforms;
const imageLoadPromises: Promise<void>[] = [];
const isValidUrl = (url: string): boolean => {
try {
// Handle absolute paths
if (url.startsWith('/')) return true;
// Check if it's a valid URL
new URL(url);
return true;
} catch {
return false;
}
};
const isExternalUrl = (url: string): boolean => {
try {
if (url.startsWith('/')) return false;
const urlObject = new URL(url, window.location.origin);
return urlObject.origin !== window.location.origin;
} catch {
return false;
}
};
Object.entries(uniformsProp).forEach(([key, value]) => {
if (typeof value === 'string') {
// Use a transparent pixel for empty strings
const url = value || emptyPixel;
// Make sure the provided string is a valid URL or just skip trying to set this uniform entirely
if (!isValidUrl(url)) {
console.warn(`Uniform "${key}" has invalid URL "${url}". Skipping image loading.`);
return;
}
const imagePromise = new Promise<void>((resolve, reject) => {
const img = new Image();
if (isExternalUrl(url)) {
img.crossOrigin = 'anonymous';
}
img.onload = () => {
setMinImageSize(img);
processedUniforms[key] = img;
resolve();
};
img.onerror = () => {
console.error(`Could not set uniforms. Failed to load image at ${url}`);
reject();
};
img.src = url;
});
imageLoadPromises.push(imagePromise);
} else if (value instanceof HTMLImageElement) {
const imagePromise = value.decode().then(() => {
setMinImageSize(value);
processedUniforms[key] = value;
});
imageLoadPromises.push(imagePromise);
} else {
processedUniforms[key] = value;
}
});
await Promise.all(imageLoadPromises);
return processedUniforms;
}
/**
* A React component that mounts a shader and updates its uniforms as the component's props change
* If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image
*/
export const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(
function ShaderMountImpl(
{
fragmentShader,
uniforms: uniformsProp,
webGlContextAttributes,
speed = 0,
frame = 0,
width,
height,
minPixelRatio,
maxPixelCount,
mipmaps,
style,
...divProps
},
forwardedRef
) {
const [isInitialized, setIsInitialized] = useState(false);
const divRef = useRef<PaperShaderElement>(null);
const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);
const webGlContextAttributesRef = useRef(webGlContextAttributes);
// Initialize the ShaderMountVanilla
useEffect(() => {
const initShader = async () => {
const uniforms = await processUniforms(uniformsProp);
if (divRef.current && !shaderMountRef.current) {
shaderMountRef.current = new ShaderMountVanilla(
divRef.current,
fragmentShader,
uniforms,
webGlContextAttributesRef.current,
speed,
frame,
minPixelRatio,
maxPixelCount,
mipmaps
);
setIsInitialized(true);
}
};
initShader();
return () => {
shaderMountRef.current?.dispose();
shaderMountRef.current = null;
};
}, [fragmentShader]);
// Uniforms
useEffect(() => {
let isStale = false;
const updateUniforms = async () => {
const uniforms = await processUniforms(uniformsProp);
if (!isStale) {
// We only use the freshest uniforms otherwise we can get into race conditions
// if some uniforms (images!) take longer to load in subsequent effect runs.
shaderMountRef.current?.setUniforms(uniforms);
}
};
updateUniforms();
return () => {
isStale = true;
};
}, [uniformsProp, isInitialized]);
// Speed
useEffect(() => {
shaderMountRef.current?.setSpeed(speed);
}, [speed, isInitialized]);
// Max Pixel Count
useEffect(() => {
shaderMountRef.current?.setMaxPixelCount(maxPixelCount);
}, [maxPixelCount, isInitialized]);
// Min Pixel Ratio
useEffect(() => {
shaderMountRef.current?.setMinPixelRatio(minPixelRatio);
}, [minPixelRatio, isInitialized]);
// Frame
useEffect(() => {
shaderMountRef.current?.setFrame(frame);
}, [frame, isInitialized]);
const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;
return (
<div
ref={mergedRef}
style={
width !== undefined || height !== undefined
? {
width: typeof width === 'string' && isNaN(+width) === false ? +width : width,
height: typeof height === 'string' && isNaN(+height) === false ? +height : height,
...style,
}
: style
}
{...divProps}
/>
);
}
);
ShaderMount.displayName = 'ShaderMount';
packages/shaders-react/src/shaders/color-panels.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
getShaderColorFromString,
colorPanelsFragmentShader,
ShaderFitOptions,
type ColorPanelsUniforms,
type ColorPanelsParams,
type ShaderPreset,
defaultObjectSizing,
} from '@paper-design/shaders';
export interface ColorPanelsProps extends ShaderComponentProps, ColorPanelsParams {}
type ColorPanelsPreset = ShaderPreset<ColorPanelsParams>;
export const defaultPreset: ColorPanelsPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
speed: 0.5,
frame: 0,
colors: ['#ff9d00', '#fd4f30', '#809bff', '#6d2eff', '#333aff', '#f15cff', '#ffd557'],
colorBack: '#000000',
angle1: 0,
angle2: 0,
length: 1.1,
edges: false,
blur: 0,
fadeIn: 1,
fadeOut: 0.3,
gradient: 0,
density: 3,
scale: 0.8,
},
};
export const glassPreset: ColorPanelsPreset = {
name: 'Glass',
params: {
...defaultObjectSizing,
rotation: 112,
speed: 1,
frame: 0,
colors: ['#00cfff', '#ff2d55', '#34c759', '#af52de'],
colorBack: '#ffffff00',
angle1: 0.3,
angle2: 0.3,
length: 1,
edges: true,
blur: 0.25,
fadeIn: 0.85,
fadeOut: 0.3,
gradient: 0,
density: 1.6,
},
};
export const gradientPreset: ColorPanelsPreset = {
name: 'Gradient',
params: {
...defaultObjectSizing,
speed: 0.5,
frame: 0,
colors: ['#f2ff00', '#00000000', '#00000000', '#5a0283', '#005eff'],
colorBack: '#8ffff2',
angle1: 0.4,
angle2: 0.4,
length: 3,
edges: false,
blur: 0.5,
fadeIn: 1.0,
fadeOut: 0.39,
gradient: 0.78,
density: 1.65,
scale: 1.72,
rotation: 270,
offsetX: 0.18,
},
};
export const openingPreset: ColorPanelsPreset = {
name: 'Opening',
params: {
...defaultObjectSizing,
speed: 2.0,
frame: 0,
colors: ['#00ffff'],
colorBack: '#570044',
angle1: -1.0,
angle2: -1.0,
length: 0.52,
edges: false,
blur: 0.0,
fadeIn: 0.0,
fadeOut: 1.0,
gradient: 0.0,
density: 2.21,
scale: 2.32,
rotation: 360,
offsetX: -0.3,
offsetY: 0.6,
},
};
export const colorPanelsPresets: ColorPanelsPreset[] = [defaultPreset, glassPreset, gradientPreset, openingPreset];
export const ColorPanels: React.FC<ColorPanelsProps> = memo(function ColorPanelsImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colors = defaultPreset.params.colors,
colorBack = defaultPreset.params.colorBack,
angle1 = defaultPreset.params.angle1,
angle2 = defaultPreset.params.angle2,
length = defaultPreset.params.length,
edges = defaultPreset.params.edges,
blur = defaultPreset.params.blur,
fadeIn = defaultPreset.params.fadeIn,
fadeOut = defaultPreset.params.fadeOut,
density = defaultPreset.params.density,
gradient = defaultPreset.params.gradient,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: ColorPanelsProps) {
const uniforms = {
// Own uniforms
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_colorBack: getShaderColorFromString(colorBack),
u_angle1: angle1,
u_angle2: angle2,
u_length: length,
u_edges: edges,
u_blur: blur,
u_fadeIn: fadeIn,
u_fadeOut: fadeOut,
u_density: density,
u_gradient: gradient,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies ColorPanelsUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={colorPanelsFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/dithering.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import {
getShaderColorFromString,
ditheringFragmentShader,
ShaderFitOptions,
type DitheringUniforms,
type DitheringParams,
type ShaderPreset,
defaultPatternSizing,
defaultObjectSizing,
DitheringTypes,
} from '@paper-design/shaders';
import { DitheringShapes } from '@paper-design/shaders';
export interface DitheringProps extends ShaderComponentProps, DitheringParams {
/** @deprecated use `size` instead */
pxSize?: number;
}
type DitheringPreset = ShaderPreset<DitheringParams>;
export const defaultPreset: DitheringPreset = {
name: 'Default',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
scale: 0.6,
colorBack: '#000000',
colorFront: '#00b2ff',
shape: 'sphere',
type: '4x4',
size: 2,
},
} as const;
export const sinePreset: DitheringPreset = {
name: 'Sine Wave',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorBack: '#730d54',
colorFront: '#00becc',
shape: 'wave',
type: '4x4',
size: 11,
scale: 1.2,
},
} as const;
export const bugsPreset: DitheringPreset = {
name: 'Bugs',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorBack: '#000000',
colorFront: '#008000',
shape: 'dots',
type: 'random',
size: 9,
},
} as const;
export const ripplePreset: DitheringPreset = {
name: 'Ripple',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colorBack: '#603520',
colorFront: '#c67953',
shape: 'ripple',
type: '2x2',
size: 3,
},
} as const;
export const swirlPreset: DitheringPreset = {
name: 'Swirl',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colorBack: '#00000000',
colorFront: '#47a8e1',
shape: 'swirl',
type: '8x8',
size: 2,
},
} as const;
export const warpPreset: DitheringPreset = {
name: 'Warp',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colorBack: '#301c2a',
colorFront: '#56ae6c',
shape: 'warp',
type: '4x4',
size: 2.5,
},
} as const;
export const ditheringPresets: DitheringPreset[] = [
defaultPreset,
warpPreset,
sinePreset,
ripplePreset,
bugsPreset,
swirlPreset,
];
export const Dithering: React.FC<DitheringProps> = memo(function DitheringImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colorFront = defaultPreset.params.colorFront,
shape = defaultPreset.params.shape,
type = defaultPreset.params.type,
pxSize,
size = pxSize === undefined ? defaultPreset.params.size : pxSize,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colorFront: getShaderColorFromString(colorFront),
u_shape: DitheringShapes[shape],
u_type: DitheringTypes[type],
u_pxSize: size,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies DitheringUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={ditheringFragmentShader} uniforms={uniforms} />
);
});
packages/shaders-react/src/shaders/dot-grid.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
getShaderColorFromString,
dotGridFragmentShader,
DotGridShapes,
ShaderFitOptions,
type DotGridParams,
type DotGridUniforms,
type ShaderPreset,
defaultPatternSizing,
} from '@paper-design/shaders';
export interface DotGridProps extends ShaderComponentProps, DotGridParams {}
type DotGridPreset = ShaderPreset<DotGridParams>;
export const defaultPreset: DotGridPreset = {
name: 'Default',
params: {
...defaultPatternSizing,
colorBack: '#000000',
colorFill: '#ffffff',
colorStroke: '#ffaa00',
size: 2,
gapX: 32,
gapY: 32,
strokeWidth: 0,
sizeRange: 0,
opacityRange: 0,
shape: 'circle',
},
};
const trianglesPreset: DotGridPreset = {
name: 'Triangles',
params: {
...defaultPatternSizing,
colorBack: '#ffffff',
colorFill: '#ffffff',
colorStroke: '#808080',
size: 5,
gapX: 32,
gapY: 32,
strokeWidth: 1,
sizeRange: 0,
opacityRange: 0,
shape: 'triangle',
},
};
const treeLinePreset: DotGridPreset = {
name: 'Tree line',
params: {
...defaultPatternSizing,
colorBack: '#f4fce7',
colorFill: '#052e19',
colorStroke: '#000000',
size: 8,
gapX: 20,
gapY: 90,
strokeWidth: 0,
sizeRange: 1,
opacityRange: 0.6,
shape: 'circle',
},
};
const wallpaperPreset: DotGridPreset = {
name: 'Wallpaper',
params: {
...defaultPatternSizing,
colorBack: '#204030',
colorFill: '#000000',
colorStroke: '#bd955b',
size: 9,
gapX: 32,
gapY: 32,
strokeWidth: 1,
sizeRange: 0,
opacityRange: 0,
shape: 'diamond',
},
};
export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];
export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
// Own props
colorBack = defaultPreset.params.colorBack,
colorFill = defaultPreset.params.colorFill,
colorStroke = defaultPreset.params.colorStroke,
size = defaultPreset.params.size,
gapX = defaultPreset.params.gapX,
gapY = defaultPreset.params.gapY,
strokeWidth = defaultPreset.params.strokeWidth,
sizeRange = defaultPreset.params.sizeRange,
opacityRange = defaultPreset.params.opacityRange,
shape = defaultPreset.params.shape,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
// Other props
maxPixelCount = 6016 * 3384, // Higher max resolution for this shader
...props
}: DotGridProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colorFill: getShaderColorFromString(colorFill),
u_colorStroke: getShaderColorFromString(colorStroke),
u_dotSize: size,
u_gapX: gapX,
u_gapY: gapY,
u_strokeWidth: strokeWidth,
u_sizeRange: sizeRange,
u_opacityRange: opacityRange,
u_shape: DotGridShapes[shape],
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies DotGridUniforms;
return (
<ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/dot-orbit.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
getShaderColorFromString,
getShaderNoiseTexture,
dotOrbitFragmentShader,
ShaderFitOptions,
type DotOrbitParams,
type DotOrbitUniforms,
type ShaderPreset,
defaultPatternSizing,
} from '@paper-design/shaders';
export interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}
type DotOrbitPreset = ShaderPreset<DotOrbitParams>;
export const defaultPreset: DotOrbitPreset = {
name: 'Default',
params: {
...defaultPatternSizing,
speed: 1.5,
frame: 0,
colorBack: '#000000',
colors: ['#ffc96b', '#ff6200', '#ff2f00', '#421100', '#1a0000'],
size: 1,
sizeRange: 0,
spreading: 1,
stepsPerColor: 4,
},
};
export const shinePreset: DotOrbitPreset = {
name: 'Shine',
params: {
...defaultPatternSizing,
speed: 0.1,
frame: 0,
colors: ['#ffffff', '#006aff', '#fff675'],
colorBack: '#000000',
stepsPerColor: 4,
size: 0.3,
sizeRange: 0.2,
spreading: 1,
scale: 0.4,
},
};
export const bubblesPreset: DotOrbitPreset = {
name: 'Bubbles',
params: {
...defaultPatternSizing,
speed: 0.4,
frame: 0,
colors: ['#D0D2D5'],
colorBack: '#989CA4',
stepsPerColor: 2,
size: 0.9,
sizeRange: 0.7,
spreading: 1.0,
scale: 1.64,
},
};
export const hallucinatoryPreset: DotOrbitPreset = {
name: 'Hallucinatory',
params: {
...defaultPatternSizing,
speed: 5,
frame: 0,
colors: ['#000000'],
colorBack: '#ffe500',
stepsPerColor: 2,
size: 0.65,
sizeRange: 0,
spreading: 0.3,
scale: 0.5,
},
};
export const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset, bubblesPreset, shinePreset, hallucinatoryPreset];
export const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
size = defaultPreset.params.size,
sizeRange = defaultPreset.params.sizeRange,
spreading = defaultPreset.params.spreading,
stepsPerColor = defaultPreset.params.stepsPerColor,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: DotOrbitProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_size: size,
u_sizeRange: sizeRange,
u_spreading: spreading,
u_stepsPerColor: stepsPerColor,
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies DotOrbitUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/fluted-glass.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import {
flutedGlassFragmentShader,
ShaderFitOptions,
type FlutedGlassUniforms,
type FlutedGlassParams,
defaultObjectSizing,
GlassDistortionShapes,
GlassGridShapes,
type ImageShaderPreset,
getShaderColorFromString,
} from '@paper-design/shaders';
export interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {
/** @deprecated use `size` instead */
count?: number;
}
type FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;
export const defaultPreset: FlutedGlassPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#00000000',
colorShadow: '#000000',
colorHighlight: '#ffffff',
shadows: 0.25,
size: 0.5,
angle: 0,
distortionShape: 'prism',
highlights: 0.1,
shape: 'lines',
distortion: 0.5,
shift: 0,
blur: 0,
edges: 0.25,
stretch: 0,
margin: 0,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
grainMixer: 0,
grainOverlay: 0,
},
};
export const wavesPreset: FlutedGlassPreset = {
name: 'Waves',
params: {
...defaultObjectSizing,
fit: 'cover',
scale: 1.2,
speed: 0,
frame: 0,
colorBack: '#00000000',
colorShadow: '#000000',
colorHighlight: '#ffffff',
shadows: 0,
size: 0.9,
angle: 0,
distortionShape: 'contour',
highlights: 0,
shape: 'wave',
distortion: 0.5,
shift: 0,
blur: 0.1,
edges: 0.5,
stretch: 1,
margin: 0,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
grainMixer: 0,
grainOverlay: 0.05,
},
};
export const abstractPreset: FlutedGlassPreset = {
name: 'Abstract',
params: {
...defaultObjectSizing,
fit: 'cover',
scale: 4,
speed: 0,
frame: 0,
colorBack: '#00000000',
colorShadow: '#000000',
colorHighlight: '#ffffff',
shadows: 0,
size: 0.7,
angle: 30,
distortionShape: 'flat',
highlights: 0,
shape: 'linesIrregular',
distortion: 1,
shift: 0,
blur: 1,
edges: 0.5,
stretch: 1,
margin: 0,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
grainMixer: 0.1,
grainOverlay: 0.1,
},
};
export const foldsPreset: FlutedGlassPreset = {
name: 'Folds',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#00000000',
colorShadow: '#000000',
colorHighlight: '#ffffff',
shadows: 0.4,
size: 0.4,
angle: 0,
distortionShape: 'cascade',
highlights: 0,
shape: 'lines',
distortion: 0.75,
shift: 0,
blur: 0.25,
edges: 0.5,
stretch: 0,
margin: 0.1,
marginLeft: 0.1,
marginRight: 0.1,
marginTop: 0.1,
marginBottom: 0.1,
grainMixer: 0,
grainOverlay: 0,
},
};
export const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, abstractPreset, wavesPreset, foldsPreset];
export const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colorShadow = defaultPreset.params.colorShadow,
colorHighlight = defaultPreset.params.colorHighlight,
image = '',
shadows = defaultPreset.params.shadows,
angle = defaultPreset.params.angle,
distortion = defaultPreset.params.distortion,
distortionShape = defaultPreset.params.distortionShape,
highlights = defaultPreset.params.highlights,
shape = defaultPreset.params.shape,
shift = defaultPreset.params.shift,
blur = defaultPreset.params.blur,
edges = defaultPreset.params.edges,
margin,
marginLeft = margin ?? defaultPreset.params.marginLeft,
marginRight = margin ?? defaultPreset.params.marginRight,
marginTop = margin ?? defaultPreset.params.marginTop,
marginBottom = margin ?? defaultPreset.params.marginBottom,
grainMixer = defaultPreset.params.grainMixer,
grainOverlay = defaultPreset.params.grainOverlay,
stretch = defaultPreset.params.stretch,
// integer `count` was deprecated in favor of the normalized `size` param
count,
size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: FlutedGlassProps) {
const uniforms = {
// Own uniforms
u_image: image,
u_colorBack: getShaderColorFromString(colorBack),
u_colorShadow: getShaderColorFromString(colorShadow),
u_colorHighlight: getShaderColorFromString(colorHighlight),
u_shadows: shadows,
u_size: size,
u_angle: angle,
u_distortion: distortion,
u_shift: shift,
u_blur: blur,
u_edges: edges,
u_stretch: stretch,
u_distortionShape: GlassDistortionShapes[distortionShape],
u_highlights: highlights,
u_shape: GlassGridShapes[shape],
u_marginLeft: marginLeft,
u_marginRight: marginRight,
u_marginTop: marginTop,
u_marginBottom: marginBottom,
u_grainMixer: grainMixer,
u_grainOverlay: grainOverlay,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies FlutedGlassUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={flutedGlassFragmentShader}
mipmaps={['u_image']}
uniforms={uniforms}
/>
);
});
packages/shaders-react/src/shaders/gem-smoke.tsx
import { memo, useLayoutEffect, useState } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
gemSmokeFragmentShader,
ShaderFitOptions,
defaultObjectSizing,
type GemSmokeUniforms,
type GemSmokeParams,
toProcessedGemSmoke,
type ImageShaderPreset,
getShaderColorFromString,
GemSmokeShapes,
} from '@paper-design/shaders';
import { transparentPixel } from '../transparent-pixel.js';
import { suspend } from '../suspend.js';
export interface GemSmokeProps extends ShaderComponentProps, GemSmokeParams {
/**
* Suspends the component when the image is being processed.
*/
suspendWhenProcessingImage?: boolean;
}
type GemSmokePreset = ImageShaderPreset<GemSmokeParams>;
export const defaultPreset: GemSmokePreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 0.6,
speed: 1,
frame: 0,
colorBack: '#f0efea',
colorInner: '#fafaf5',
colors: ['#333333', '#e7e6df'],
outerGlow: 0.55,
innerGlow: 1,
innerDistortion: 0.8,
outerDistortion: 0.6,
offset: 0,
angle: 0,
size: 0.8,
shape: 'diamond',
},
};
export const fluorescentPreset: GemSmokePreset = {
name: 'Fluorescent',
params: {
...defaultObjectSizing,
scale: 0.6,
speed: 1,
frame: 0,
colorBack: '#000000',
colorInner: '#000000',
colors: ['#2fb64c', '#cdff61', '#ffffff'],
outerGlow: 0,
innerGlow: 1,
innerDistortion: 1,
outerDistortion: 0.8,
offset: 0,
angle: 0,
size: 0.8,
shape: 'diamond',
},
};
export const firePreset: GemSmokePreset = {
name: 'Fire',
params: {
...defaultObjectSizing,
scale: 0.6,
speed: 1,
frame: 0,
colorBack: '#000000',
colorInner: '#000000',
colors: ['#fe5b16', '#f7ff61', '#ffffff'],
outerGlow: 1,
innerGlow: 0.65,
innerDistortion: 0.6,
outerDistortion: 0.8,
offset: 0,
angle: 0,
size: 0.8,
shape: 'diamond',
},
};
export const infraredPreset: GemSmokePreset = {
name: 'Infrared',
params: {
...defaultObjectSizing,
scale: 0.6,
speed: 0.5,
frame: 0,
colorBack: '#cd28dc',
colorInner: '#00000000',
colors: ['#ff9900', '#fff67a', '#dcff52', '#00ffbb', '#0077ff'],
outerGlow: 1,
innerGlow: 1,
innerDistortion: 1,
outerDistortion: 1,
offset: 0.2,
angle: 0,
size: 1,
shape: 'diamond',
},
};
export const gemSmokePresets: GemSmokePreset[] = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];
export const GemSmoke: React.FC<GemSmokeProps> = memo(function GemSmokeImpl({
// Own props
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
image = '',
innerDistortion = defaultPreset.params.innerDistortion,
outerDistortion = defaultPreset.params.outerDistortion,
outerGlow = defaultPreset.params.outerGlow,
innerGlow = defaultPreset.params.innerGlow,
colorInner = defaultPreset.params.colorInner,
offset = defaultPreset.params.offset,
angle = defaultPreset.params.angle,
size = defaultPreset.params.size,
shape = defaultPreset.params.shape,
suspendWhenProcessingImage = false,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: GemSmokeProps) {
const imageUrl = typeof image === 'string' ? image : image.src;
const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);
let processedImage: string;
if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {
processedImage = suspend(
(): Promise<string> => toProcessedGemSmoke(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),
[imageUrl, 'gemSmoke']
);
} else {
processedImage = processedStateImage;
}
useLayoutEffect(() => {
if (suspendWhenProcessingImage) {
// Skip doing work in the effect as it's been handled by suspense.
return;
}
if (!imageUrl) {
setProcessedStateImage(transparentPixel);
return;
}
let url: string;
let current = true;
toProcessedGemSmoke(imageUrl).then((result) => {
if (current) {
url = URL.createObjectURL(result.pngBlob);
setProcessedStateImage(url);
}
});
return () => {
current = false;
};
}, [imageUrl, suspendWhenProcessingImage]);
const uniforms = {
// Own uniforms
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_colorBack: getShaderColorFromString(colorBack),
u_image: processedImage,
u_innerDistortion: innerDistortion,
u_outerDistortion: outerDistortion,
u_outerGlow: outerGlow,
u_innerGlow: innerGlow,
u_colorInner: getShaderColorFromString(colorInner),
u_offset: offset,
u_angle: angle,
u_size: size,
u_isImage: Boolean(image),
u_shape: GemSmokeShapes[shape],
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies GemSmokeUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={gemSmokeFragmentShader}
mipmaps={['u_image']}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/god-rays.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderNoiseTexture,
getShaderColorFromString,
godRaysFragmentShader,
ShaderFitOptions,
type GodRaysParams,
type GodRaysUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}
type GodRaysPreset = ShaderPreset<GodRaysParams>;
export const defaultPreset: GodRaysPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
offsetX: 0,
offsetY: -0.55,
colorBack: '#000000',
colorBloom: '#0000ff',
colors: ['#a600ff6e', '#6200fff0', '#ffffff', '#33fff5'],
density: 0.3,
spotty: 0.3,
midIntensity: 0.4,
midSize: 0.2,
intensity: 0.8,
bloom: 0.4,
speed: 0.75,
frame: 0,
},
};
export const warpPreset: GodRaysPreset = {
name: 'Warp',
params: {
...defaultObjectSizing,
colorBack: '#000000',
colorBloom: '#222288',
colors: ['#ff47d4', '#ff8c00', '#ffffff'],
density: 0.45,
spotty: 0.15,
midIntensity: 0.4,
midSize: 0.33,
intensity: 0.79,
bloom: 0.4,
speed: 2,
frame: 0,
},
};
export const linearPreset: GodRaysPreset = {
name: 'Linear',
params: {
...defaultObjectSizing,
offsetX: 0.2,
offsetY: -0.8,
colorBack: '#000000',
colorBloom: '#eeeeee',
colors: ['#ffffff1f', '#ffffff3d', '#ffffff29'],
density: 0.41,
spotty: 0.25,
midSize: 0.1,
midIntensity: 0.75,
intensity: 0.79,
bloom: 1,
speed: 0.5,
frame: 0,
},
};
export const etherPreset: GodRaysPreset = {
name: 'Ether',
params: {
...defaultObjectSizing,
offsetX: -0.6,
colorBack: '#090f1d',
colorBloom: '#ffffff',
colors: ['#148effa6', '#c4dffebe', '#232a47'],
density: 0.03,
spotty: 0.77,
midSize: 0.1,
midIntensity: 0.6,
intensity: 0.6,
bloom: 0.6,
speed: 1,
frame: 0,
},
};
export const godRaysPresets: GodRaysPreset[] = [defaultPreset, warpPreset, linearPreset, etherPreset];
export const GodRays: React.FC<GodRaysProps> = memo(function GodRaysImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBloom = defaultPreset.params.colorBloom,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
density = defaultPreset.params.density,
spotty = defaultPreset.params.spotty,
midIntensity = defaultPreset.params.midIntensity,
midSize = defaultPreset.params.midSize,
intensity = defaultPreset.params.intensity,
bloom = defaultPreset.params.bloom,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: GodRaysProps) {
const uniforms = {
// Own uniforms
u_colorBloom: getShaderColorFromString(colorBloom),
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_density: density,
u_spotty: spotty,
u_midIntensity: midIntensity,
u_midSize: midSize,
u_intensity: intensity,
u_bloom: bloom,
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies GodRaysUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={godRaysFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/grain-gradient.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import {
getShaderColorFromString,
getShaderNoiseTexture,
grainGradientFragmentShader,
ShaderFitOptions,
type GrainGradientUniforms,
type GrainGradientParams,
type ShaderPreset,
defaultPatternSizing,
defaultObjectSizing,
GrainGradientShapes,
} from '@paper-design/shaders';
export interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}
type GrainGradientPreset = ShaderPreset<GrainGradientParams>;
export const defaultPreset: GrainGradientPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colorBack: '#000000',
colors: ['#7300ff', '#eba8ff', '#00bfff', '#2a00ff'],
softness: 0.5,
intensity: 0.5,
noise: 0.25,
shape: 'corners',
},
};
export const wavePreset: GrainGradientPreset = {
name: 'Wave',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorBack: '#000a0f',
colors: ['#c4730b', '#bdad5f', '#d8ccc7'],
softness: 0.7,
intensity: 0.15,
noise: 0.5,
shape: 'wave',
},
};
export const dotsPreset: GrainGradientPreset = {
name: 'Dots',
params: {
...defaultPatternSizing,
scale: 0.6,
speed: 1,
frame: 0,
colorBack: '#0a0000',
colors: ['#6f0000', '#0080ff', '#f2ebc9', '#33cc33'],
softness: 1,
intensity: 1,
noise: 0.7,
shape: 'dots',
},
};
export const truchetPreset: GrainGradientPreset = {
name: 'Truchet',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorBack: '#0a0000',
colors: ['#6f2200', '#eabb7c', '#39b523'],
softness: 0,
intensity: 0.2,
noise: 1,
shape: 'truchet',
},
};
export const ripplePreset: GrainGradientPreset = {
name: 'Ripple',
params: {
...defaultObjectSizing,
scale: 0.5,
speed: 1,
frame: 0,
colorBack: '#140a00',
colors: ['#6f2d00', '#88ddae', '#2c0b1d'],
softness: 0.5,
intensity: 0.5,
noise: 0.5,
shape: 'ripple',
},
};
export const blobPreset: GrainGradientPreset = {
name: 'Blob',
params: {
...defaultObjectSizing,
scale: 1.3,
speed: 1,
frame: 0,
colorBack: '#0f0e18',
colors: ['#3e6172', '#a49b74', '#568c50'],
softness: 0,
intensity: 0.15,
noise: 0.5,
shape: 'blob',
},
};
export const grainGradientPresets: GrainGradientPreset[] = [
defaultPreset,
wavePreset,
dotsPreset,
truchetPreset,
ripplePreset,
blobPreset,
];
export const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
softness = defaultPreset.params.softness,
intensity = defaultPreset.params.intensity,
noise = defaultPreset.params.noise,
shape = defaultPreset.params.shape,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: GrainGradientProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_softness: softness,
u_intensity: intensity,
u_noise: noise,
u_shape: GrainGradientShapes[shape],
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies GrainGradientUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={grainGradientFragmentShader}
uniforms={uniforms}
/>
);
});
packages/shaders-react/src/shaders/halftone-cmyk.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
halftoneCmykFragmentShader,
getShaderColorFromString,
getShaderNoiseTexture,
ShaderFitOptions,
type HalftoneCmykUniforms,
type HalftoneCmykParams,
defaultObjectSizing,
type ImageShaderPreset,
HalftoneCmykTypes,
} from '@paper-design/shaders';
export interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykParams {}
type HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;
export const defaultPreset: HalftoneCmykPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 1,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#fbfaf5',
colorC: '#00b4ff',
colorM: '#fc519f',
colorY: '#ffd800',
colorK: '#231f20',
size: 0.2,
contrast: 1,
softness: 1,
grainSize: 0.5,
grainMixer: 0,
grainOverlay: 0,
gridNoise: 0.2,
floodC: 0.15,
floodM: 0,
floodY: 0,
floodK: 0,
gainC: 0.3,
gainM: 0,
gainY: 0.2,
gainK: 0,
type: 'ink',
},
};
export const dropsPreset: HalftoneCmykPreset = {
name: 'Drops',
params: {
...defaultObjectSizing,
scale: 1,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#eeefd7',
colorC: '#00b2ff',
colorM: '#fc4f4f',
colorY: '#ffd900',
colorK: '#231f20',
size: 0.88,
contrast: 1.15,
softness: 0,
grainSize: 0.01,
grainMixer: 0.05,
grainOverlay: 0.25,
gridNoise: 0.5,
floodC: 0.15,
floodM: 0,
floodY: 0,
floodK: 0,
gainC: 1.0,
gainM: 0.44,
gainY: -1.0,
gainK: 0,
type: 'ink',
},
};
export const newspaper: HalftoneCmykPreset = {
name: 'Newspaper',
params: {
...defaultObjectSizing,
scale: 1,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#f2f1e8',
colorC: '#7a7a75',
colorM: '#7a7a75',
colorY: '#7a7a75',
colorK: '#231f20',
size: 0.01,
contrast: 2,
softness: 0.2,
grainSize: 0,
grainMixer: 0,
grainOverlay: 0.2,
gridNoise: 0.6,
floodC: 0,
floodM: 0,
floodY: 0,
floodK: 0.1,
gainC: -0.17,
gainM: -0.45,
gainY: -0.45,
gainK: 0,
type: 'dots',
},
};
export const vintagePreset: HalftoneCmykPreset = {
name: 'Vintage',
params: {
...defaultObjectSizing,
scale: 1,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#fffaf0',
colorC: '#59afc5',
colorM: '#d8697c',
colorY: '#fad85c',
colorK: '#2d2824',
size: 0.2,
contrast: 1.25,
softness: 0.4,
grainSize: 0.5,
grainMixer: 0.15,
grainOverlay: 0.1,
gridNoise: 0.45,
floodC: 0.15,
floodM: 0,
floodY: 0,
floodK: 0,
gainC: 0.3,
gainM: 0,
gainY: 0.2,
gainK: 0,
type: 'sharp',
},
};
export const halftoneCmykPresets: HalftoneCmykPreset[] = [defaultPreset, dropsPreset, newspaper, vintagePreset];
export const HalftoneCmyk: React.FC<HalftoneCmykProps> = memo(function HalftoneCmykImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colorC = defaultPreset.params.colorC,
colorM = defaultPreset.params.colorM,
colorY = defaultPreset.params.colorY,
colorK = defaultPreset.params.colorK,
image = '',
size = defaultPreset.params.size,
contrast = defaultPreset.params.contrast,
softness = defaultPreset.params.softness,
grainSize = defaultPreset.params.grainSize,
grainMixer = defaultPreset.params.grainMixer,
grainOverlay = defaultPreset.params.grainOverlay,
gridNoise = defaultPreset.params.gridNoise,
floodC = defaultPreset.params.floodC,
floodM = defaultPreset.params.floodM,
floodY = defaultPreset.params.floodY,
floodK = defaultPreset.params.floodK,
gainC = defaultPreset.params.gainC,
gainM = defaultPreset.params.gainM,
gainY = defaultPreset.params.gainY,
gainK = defaultPreset.params.gainK,
type = defaultPreset.params.type,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: HalftoneCmykProps) {
const uniforms = {
// Own uniforms
u_image: image,
u_noiseTexture: getShaderNoiseTexture(),
u_colorBack: getShaderColorFromString(colorBack),
u_colorC: getShaderColorFromString(colorC),
u_colorM: getShaderColorFromString(colorM),
u_colorY: getShaderColorFromString(colorY),
u_colorK: getShaderColorFromString(colorK),
u_size: size,
u_contrast: contrast,
u_softness: softness,
u_grainSize: grainSize,
u_grainMixer: grainMixer,
u_grainOverlay: grainOverlay,
u_gridNoise: gridNoise,
u_floodC: floodC,
u_floodM: floodM,
u_floodY: floodY,
u_floodK: floodK,
u_gainC: gainC,
u_gainM: gainM,
u_gainY: gainY,
u_gainK: gainK,
u_type: HalftoneCmykTypes[type],
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies HalftoneCmykUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={halftoneCmykFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/halftone-dots.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
halftoneDotsFragmentShader,
getShaderColorFromString,
ShaderFitOptions,
type HalftoneDotsUniforms,
type HalftoneDotsParams,
defaultObjectSizing,
type ImageShaderPreset,
HalftoneDotsTypes,
HalftoneDotsGrids,
} from '@paper-design/shaders';
export interface HalftoneDotsProps extends ShaderComponentProps, HalftoneDotsParams {}
type HalftoneDotsPreset = ImageShaderPreset<HalftoneDotsParams>;
export const defaultPreset: HalftoneDotsPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#f2f1e8',
colorFront: '#2b2b2b',
size: 0.5,
radius: 1.25,
contrast: 0.4,
originalColors: false,
inverted: false,
grainMixer: 0.2,
grainOverlay: 0.2,
grainSize: 0.5,
grid: 'hex',
type: 'gooey',
},
};
export const ledPreset: HalftoneDotsPreset = {
name: 'LED screen',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#000000',
colorFront: '#29ff7b',
size: 0.5,
radius: 1.5,
contrast: 0.3,
originalColors: false,
inverted: false,
grainMixer: 0,
grainOverlay: 0,
grainSize: 0.5,
grid: 'square',
type: 'soft',
},
};
export const netPreset: HalftoneDotsPreset = {
name: 'Mosaic',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#000000',
colorFront: '#b2aeae',
size: 0.6,
radius: 2,
contrast: 0.01,
originalColors: true,
inverted: false,
grainMixer: 0,
grainOverlay: 0,
grainSize: 0.5,
grid: 'hex',
type: 'classic',
},
};
export const roundAndSquarePreset: HalftoneDotsPreset = {
name: 'Round and square',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorBack: '#141414',
colorFront: '#ff8000',
size: 0.8,
radius: 1,
contrast: 1,
originalColors: false,
inverted: true,
grainMixer: 0.05,
grainOverlay: 0.3,
grainSize: 0.5,
grid: 'square',
type: 'holes',
},
};
export const halftoneDotsPresets: HalftoneDotsPreset[] = [defaultPreset, ledPreset, netPreset, roundAndSquarePreset];
export const HalftoneDots: React.FC<HalftoneDotsProps> = memo(function HalftoneDotsImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorFront = defaultPreset.params.colorFront,
colorBack = defaultPreset.params.colorBack,
image = '',
size = defaultPreset.params.size,
radius = defaultPreset.params.radius,
contrast = defaultPreset.params.contrast,
originalColors = defaultPreset.params.originalColors,
inverted = defaultPreset.params.inverted,
grainMixer = defaultPreset.params.grainMixer,
grainOverlay = defaultPreset.params.grainOverlay,
grainSize = defaultPreset.params.grainSize,
grid = defaultPreset.params.grid,
type = defaultPreset.params.type,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: HalftoneDotsProps) {
const uniforms = {
// Own uniforms
u_image: image,
u_colorFront: getShaderColorFromString(colorFront),
u_colorBack: getShaderColorFromString(colorBack),
u_size: size,
u_radius: radius,
u_contrast: contrast,
u_originalColors: originalColors,
u_inverted: inverted,
u_grainMixer: grainMixer,
u_grainOverlay: grainOverlay,
u_grainSize: grainSize,
u_grid: HalftoneDotsGrids[grid],
u_type: HalftoneDotsTypes[type],
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies HalftoneDotsUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={halftoneDotsFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/heatmap.tsx
import React, { memo, useLayoutEffect, useMemo, useState } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import {
getShaderColorFromString,
heatmapFragmentShader,
ShaderFitOptions,
type HeatmapUniforms,
type HeatmapParams,
defaultObjectSizing,
toProcessedHeatmap,
type ImageShaderPreset,
} from '@paper-design/shaders';
import { transparentPixel } from '../transparent-pixel.js';
import { suspend } from '../suspend.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
export interface HeatmapProps extends ShaderComponentProps, HeatmapParams {
/**
* Suspends the component when the image is being processed.
*/
suspendWhenProcessingImage?: boolean;
}
export type HeatmapPreset = ImageShaderPreset<HeatmapParams>;
export const defaultPreset: HeatmapPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 0.75,
speed: 1,
frame: 0,
contour: 0.5,
angle: 0,
noise: 0,
innerGlow: 0.5,
outerGlow: 0.5,
colorBack: '#000000',
colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],
},
} as const satisfies HeatmapPreset;
export const sepiaPreset: HeatmapPreset = {
name: 'Sepia',
params: {
...defaultObjectSizing,
scale: 0.75,
speed: 0.5,
frame: 0,
contour: 0.5,
angle: 0,
noise: 0.75,
innerGlow: 0.5,
outerGlow: 0.5,
colorBack: '#000000',
colors: ['#997F45', '#ffffff'],
},
} as const satisfies HeatmapPreset;
export const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];
export const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
image = '',
contour = defaultPreset.params.contour,
angle = defaultPreset.params.angle,
noise = defaultPreset.params.noise,
innerGlow = defaultPreset.params.innerGlow,
outerGlow = defaultPreset.params.outerGlow,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
suspendWhenProcessingImage = false,
// Sizing props
fit = defaultPreset.params.fit,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
worldHeight = defaultPreset.params.worldHeight,
worldWidth = defaultPreset.params.worldWidth,
...props
}: HeatmapProps) {
const imageUrl = typeof image === 'string' ? image : image.src;
const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);
let processedImage: string;
// toProcessedHeatmap expects the document object to exist. This prevents SSR issues during builds.
if (suspendWhenProcessingImage && typeof window !== 'undefined') {
processedImage = suspend(
(): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),
[imageUrl, 'heatmap']
);
} else {
processedImage = processedStateImage;
}
useLayoutEffect(() => {
if (suspendWhenProcessingImage) {
// Skip doing work in the effect as it's been handled by suspense.
return;
}
if (!imageUrl) {
setProcessedStateImage(transparentPixel);
return;
}
let url: string;
let current = true;
toProcessedHeatmap(imageUrl).then((result) => {
if (current) {
url = URL.createObjectURL(result.blob);
setProcessedStateImage(url);
}
});
return () => {
current = false;
};
}, [imageUrl, suspendWhenProcessingImage]);
const uniforms = useMemo(
() => ({
// Own uniforms
u_image: processedImage,
u_contour: contour,
u_angle: angle,
u_noise: noise,
u_innerGlow: innerGlow,
u_outerGlow: outerGlow,
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_rotation: rotation,
u_scale: scale,
u_worldHeight: worldHeight,
u_worldWidth: worldWidth,
}),
[
speed,
frame,
contour,
angle,
noise,
innerGlow,
outerGlow,
colors,
colorBack,
processedImage,
fit,
offsetX,
offsetY,
originX,
originY,
rotation,
scale,
worldHeight,
worldWidth,
]
) satisfies HeatmapUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={heatmapFragmentShader}
mipmaps={['u_image']}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/image-dithering.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
imageDitheringFragmentShader,
getShaderColorFromString,
ShaderFitOptions,
type ImageDitheringUniforms,
type ImageDitheringParams,
defaultObjectSizing,
DitheringTypes,
type ImageShaderPreset,
} from '@paper-design/shaders';
export interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {
/** @deprecated use `size` instead */
pxSize?: number;
}
type ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;
export const defaultPreset: ImageDitheringPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
fit: 'cover',
// scale: 0.95,
speed: 0,
frame: 0,
colorFront: '#94ffaf',
colorBack: '#000c38',
colorHighlight: '#eaff94',
type: '8x8',
size: 2,
colorSteps: 2,
originalColors: false,
inverted: false,
},
} as const;
export const retroPreset: ImageDitheringPreset = {
name: 'Retro',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorFront: '#eeeeee',
colorBack: '#5452ff',
colorHighlight: '#eeeeee',
type: '2x2',
size: 3,
colorSteps: 1,
originalColors: true,
inverted: false,
},
} as const;
export const noisePreset: ImageDitheringPreset = {
name: 'Noise',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorFront: '#a2997c',
colorBack: '#000000',
colorHighlight: '#ededed',
type: 'random',
size: 1,
colorSteps: 1,
originalColors: false,
inverted: false,
},
} as const;
export const naturalPreset: ImageDitheringPreset = {
name: 'Natural',
params: {
...defaultObjectSizing,
fit: 'cover',
speed: 0,
frame: 0,
colorFront: '#ffffff',
colorBack: '#000000',
colorHighlight: '#ffffff',
type: '8x8',
size: 2,
colorSteps: 5,
originalColors: true,
inverted: false,
},
} as const;
export const imageDitheringPresets: ImageDitheringPreset[] = [defaultPreset, noisePreset, retroPreset, naturalPreset];
export const ImageDithering: React.FC<ImageDitheringProps> = memo(function ImageDitheringImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorFront = defaultPreset.params.colorFront,
colorBack = defaultPreset.params.colorBack,
colorHighlight = defaultPreset.params.colorHighlight,
image = '',
type = defaultPreset.params.type,
colorSteps = defaultPreset.params.colorSteps,
originalColors = defaultPreset.params.originalColors,
inverted = defaultPreset.params.inverted,
pxSize,
size = pxSize === undefined ? defaultPreset.params.size : pxSize,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: ImageDitheringProps) {
const uniforms = {
// Own uniforms
u_image: image,
u_colorFront: getShaderColorFromString(colorFront),
u_colorBack: getShaderColorFromString(colorBack),
u_colorHighlight: getShaderColorFromString(colorHighlight),
u_type: DitheringTypes[type],
u_pxSize: size,
u_colorSteps: colorSteps,
u_originalColors: originalColors,
u_inverted: inverted,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies ImageDitheringUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={imageDitheringFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/liquid-metal.tsx
import { memo, useLayoutEffect, useState } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import {
liquidMetalFragmentShader,
ShaderFitOptions,
defaultObjectSizing,
type LiquidMetalUniforms,
type LiquidMetalParams,
toProcessedLiquidMetal,
type ImageShaderPreset,
getShaderColorFromString,
LiquidMetalShapes,
} from '@paper-design/shaders';
import { transparentPixel } from '../transparent-pixel.js';
import { suspend } from '../suspend.js';
export interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {
/**
* Suspends the component when the image is being processed.
*/
suspendWhenProcessingImage?: boolean;
}
type LiquidMetalPreset = ImageShaderPreset<LiquidMetalParams>;
export const defaultPreset: LiquidMetalPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 0.6,
speed: 1,
frame: 0,
colorBack: '#AAAAAC',
colorTint: '#ffffff',
distortion: 0.07,
repetition: 2.0,
shiftRed: 0.3,
shiftBlue: 0.3,
contour: 0.4,
softness: 0.1,
angle: 70,
shape: 'diamond',
},
};
export const noirPreset: LiquidMetalPreset = {
name: 'Noir',
params: {
...defaultObjectSizing,
scale: 0.6,
speed: 1,
frame: 0,
colorBack: '#000000',
colorTint: '#606060',
softness: 0.45,
repetition: 1.5,
shiftRed: 0,
shiftBlue: 0,
distortion: 0,
contour: 0,
angle: 90,
shape: 'diamond',
},
};
export const fullScreenPreset: LiquidMetalPreset = {
name: 'Backdrop',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
scale: 1,
colorBack: '#AAAAAC',
colorTint: '#ffffff',
softness: 0.05,
repetition: 1.5,
shiftRed: 0.3,
shiftBlue: 0.3,
distortion: 0.1,
contour: 0.4,
shape: 'none',
angle: 90,
worldWidth: 0,
worldHeight: 0,
},
};
export const stripesPreset: LiquidMetalPreset = {
name: 'Stripes',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
scale: 0.6,
colorBack: '#000000',
colorTint: '#2c5d72',
softness: 0.8,
repetition: 6,
shiftRed: 1,
shiftBlue: -1,
distortion: 0.4,
contour: 0.4,
shape: 'circle',
angle: 0,
},
};
export const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, noirPreset, fullScreenPreset, stripesPreset];
export const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({
// Own props
colorBack = defaultPreset.params.colorBack,
colorTint = defaultPreset.params.colorTint,
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
image = '',
contour = defaultPreset.params.contour,
distortion = defaultPreset.params.distortion,
softness = defaultPreset.params.softness,
repetition = defaultPreset.params.repetition,
shiftRed = defaultPreset.params.shiftRed,
shiftBlue = defaultPreset.params.shiftBlue,
angle = defaultPreset.params.angle,
shape = defaultPreset.params.shape,
suspendWhenProcessingImage = false,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: LiquidMetalProps) {
const imageUrl = typeof image === 'string' ? image : image.src;
const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);
let processedImage: string;
if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {
processedImage = suspend(
(): Promise<string> => toProcessedLiquidMetal(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),
[imageUrl, 'liquid-metal']
);
} else {
processedImage = processedStateImage;
}
useLayoutEffect(() => {
if (suspendWhenProcessingImage) {
// Skip doing work in the effect as it's been handled by suspense.
return;
}
if (!imageUrl) {
setProcessedStateImage(transparentPixel);
return;
}
let url: string;
let current = true;
toProcessedLiquidMetal(imageUrl).then((result) => {
if (current) {
url = URL.createObjectURL(result.pngBlob);
setProcessedStateImage(url);
}
});
return () => {
current = false;
};
}, [imageUrl, suspendWhenProcessingImage]);
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colorTint: getShaderColorFromString(colorTint),
u_image: processedImage,
u_contour: contour,
u_distortion: distortion,
u_softness: softness,
u_repetition: repetition,
u_shiftRed: shiftRed,
u_shiftBlue: shiftBlue,
u_angle: angle,
u_isImage: Boolean(image),
u_shape: LiquidMetalShapes[shape],
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies LiquidMetalUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={liquidMetalFragmentShader}
mipmaps={['u_image']}
uniforms={uniforms}
/>
);
});
packages/shaders-react/src/shaders/mesh-gradient.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderColorFromString,
meshGradientFragmentShader,
ShaderFitOptions,
type MeshGradientParams,
type MeshGradientUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}
type MeshGradientPreset = ShaderPreset<MeshGradientParams>;
export const defaultPreset: MeshGradientPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colors: ['#e0eaff', '#241d9a', '#f75092', '#9f50d3'],
distortion: 0.8,
swirl: 0.1,
grainMixer: 0,
grainOverlay: 0,
},
};
export const purplePreset: MeshGradientPreset = {
name: 'Purple',
params: {
...defaultObjectSizing,
speed: 0.6,
frame: 0,
colors: ['#aaa7d7', '#3c2b8e'],
distortion: 1,
swirl: 1,
grainMixer: 0,
grainOverlay: 0,
},
};
export const beachPreset: MeshGradientPreset = {
name: 'Beach',
params: {
...defaultObjectSizing,
speed: 0.1,
frame: 0,
colors: ['#bcecf6', '#00aaff', '#00f7ff', '#ffd447'],
distortion: 0.8,
swirl: 0.35,
grainMixer: 0,
grainOverlay: 0,
},
};
export const inkPreset: MeshGradientPreset = {
name: 'Ink',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colors: ['#ffffff', '#000000'],
distortion: 1,
swirl: 0.2,
rotation: 90,
grainMixer: 0,
grainOverlay: 0,
},
};
export const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, inkPreset, purplePreset, beachPreset];
export const MeshGradient: React.FC<MeshGradientProps> = memo(function MeshGradientImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colors = defaultPreset.params.colors,
distortion = defaultPreset.params.distortion,
swirl = defaultPreset.params.swirl,
grainMixer = defaultPreset.params.grainMixer,
grainOverlay = defaultPreset.params.grainOverlay,
// Sizing props
fit = defaultPreset.params.fit,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: MeshGradientProps) {
const uniforms = {
// Own uniforms
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_distortion: distortion,
u_swirl: swirl,
u_grainMixer: grainMixer,
u_grainOverlay: grainOverlay,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies MeshGradientUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={meshGradientFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/metaballs.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderColorFromString,
getShaderNoiseTexture,
metaballsFragmentShader,
ShaderFitOptions,
type MetaballsParams,
type MetaballsUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}
type MetaballsPreset = ShaderPreset<MetaballsParams>;
export const defaultPreset: MetaballsPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 1,
speed: 1,
frame: 0,
colorBack: '#000000',
colors: ['#6e33cc', '#ff5500', '#ffc105', '#ffc800', '#f585ff'],
count: 10,
size: 0.83,
},
};
export const inkDropsPreset: MetaballsPreset = {
name: 'Ink Drops',
params: {
...defaultObjectSizing,
scale: 1,
speed: 2,
frame: 0,
colorBack: '#ffffff00',
colors: ['#000000'],
count: 18,
size: 0.1,
},
};
export const backgroundPreset: MetaballsPreset = {
name: 'Background',
params: {
...defaultObjectSizing,
speed: 0.5,
frame: 0,
colors: ['#ae00ff', '#00ff95', '#ffc105'],
colorBack: '#2a273f',
count: 13,
size: 0.81,
scale: 4.0,
rotation: 0,
offsetX: -0.3,
},
};
export const solarPreset: MetaballsPreset = {
name: 'Solar',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colors: ['#ffc800', '#ff5500', '#ffc105'],
colorBack: '#102f84',
count: 7,
size: 0.75,
scale: 1,
},
};
export const metaballsPresets: MetaballsPreset[] = [defaultPreset, inkDropsPreset, solarPreset, backgroundPreset];
export const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
size = defaultPreset.params.size,
count = defaultPreset.params.count,
// Sizing props
fit = defaultPreset.params.fit,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: MetaballsProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_size: size,
u_count: count,
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies MetaballsUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/neuro-noise.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultPatternSizing,
getShaderColorFromString,
neuroNoiseFragmentShader,
ShaderFitOptions,
type NeuroNoiseParams,
type NeuroNoiseUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {}
type NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;
export const defaultPreset: NeuroNoisePreset = {
name: 'Default',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorFront: '#ffffff',
colorMid: '#47a6ff',
colorBack: '#000000',
brightness: 0.05,
contrast: 0.3,
},
};
export const sensationPreset: NeuroNoisePreset = {
name: 'Sensation',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorFront: '#00c8ff',
colorMid: '#fbff00',
colorBack: '#8b42ff',
brightness: 0.19,
contrast: 0.12,
scale: 3,
},
};
export const bloodstreamPreset: NeuroNoisePreset = {
name: 'Bloodstream',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorFront: '#ff0000',
colorMid: '#ff0000',
colorBack: '#ffffff',
brightness: 0.24,
contrast: 0.17,
scale: 0.7,
},
};
export const ghostPreset: NeuroNoisePreset = {
name: 'Ghost',
params: {
...defaultPatternSizing,
speed: 1,
frame: 0,
colorFront: '#ffffff',
colorMid: '#000000',
colorBack: '#ffffff',
brightness: 0.0,
contrast: 1.0,
scale: 0.55,
},
};
export const neuroNoisePresets: NeuroNoisePreset[] = [
defaultPreset,
sensationPreset,
bloodstreamPreset,
ghostPreset,
] as const;
export const NeuroNoise: React.FC<NeuroNoiseProps> = memo(function NeuroNoiseImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorFront = defaultPreset.params.colorFront,
colorMid = defaultPreset.params.colorMid,
colorBack = defaultPreset.params.colorBack,
brightness = defaultPreset.params.brightness,
contrast = defaultPreset.params.contrast,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: NeuroNoiseProps) {
const uniforms = {
// Own uniforms
u_colorFront: getShaderColorFromString(colorFront),
u_colorMid: getShaderColorFromString(colorMid),
u_colorBack: getShaderColorFromString(colorBack),
u_brightness: brightness,
u_contrast: contrast,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies NeuroNoiseUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={neuroNoiseFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/paper-texture.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderColorFromString,
getShaderNoiseTexture,
paperTextureFragmentShader,
ShaderFitOptions,
type ImageShaderPreset,
type PaperTextureParams,
type PaperTextureUniforms,
} from '@paper-design/shaders';
export interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {
/** @deprecated use `fiberSize` instead */
fiberScale?: number;
/** @deprecated use `crumpleCount` instead */
foldsNumber?: number;
}
type PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;
export const defaultPreset: PaperTexturePreset = {
name: 'Default',
params: {
...defaultObjectSizing,
fit: 'contain',
scale: 0.9,
speed: 0,
frame: 0,
colorBack: '#d3d2ab',
colorPaper: '#ffffff',
colorShadow: '#cccccc',
blending: 1,
distortion: 0.75,
clip: false,
angle: 300,
seed: 4,
roughness: 0.4,
roughnessSize: 0.5,
roughnessRows: 0,
fiber: 0.4,
fiberSize: 0.5,
folds: 0.5,
foldSizeX: 1,
foldSizeY: 1,
foldOffsetX: 0,
foldOffsetY: 0,
wrinkles: 1,
wrinkleSize: 0.65,
crumples: 0,
crumpleCount: 6,
drops: 0.4,
},
};
export const creasedPreset: PaperTexturePreset = {
name: 'Creased',
params: {
...defaultObjectSizing,
fit: 'contain',
scale: 0.9,
speed: 0,
frame: 0,
colorBack: '#d3d2ab',
colorPaper: '#ffffff',
colorShadow: '#b3b3b3',
blending: 1,
distortion: -0.5,
clip: false,
angle: 60,
seed: 49,
roughness: 0.4,
roughnessSize: 0.25,
roughnessRows: 0,
fiber: 0.4,
fiberSize: 0.5,
folds: 0,
foldSizeX: 0.6,
foldSizeY: 0.89,
foldOffsetX: 0.59,
foldOffsetY: 1,
wrinkles: 0,
wrinkleSize: 0.65,
crumples: 1,
crumpleCount: 4,
drops: 0,
},
};
export const spreadPreset: PaperTexturePreset = {
name: 'Spread',
params: {
...defaultObjectSizing,
fit: 'contain',
scale: 0.9,
speed: 0,
frame: 0,
colorBack: '#ffffff00',
colorPaper: '#ffffffb5',
colorShadow: '#b3b3b3',
blending: 1,
distortion: -0.3,
clip: true,
angle: 236,
seed: 613,
roughness: 0.15,
roughnessSize: 0.25,
roughnessRows: 0,
fiber: 0.5,
fiberSize: 0.5,
folds: 1,
foldSizeX: 0.4,
foldSizeY: 0.89,
foldOffsetX: 0,
foldOffsetY: 0,
wrinkles: 0,
wrinkleSize: 0.65,
crumples: 0,
crumpleCount: 9,
drops: 0,
},
};
export const flatPreset: PaperTexturePreset = {
name: 'Flat',
params: {
...defaultObjectSizing,
fit: 'contain',
scale: 0.9,
speed: 0,
frame: 0,
colorBack: '#d4cdab',
colorPaper: '#ffffffa8',
colorShadow: '#b3b3b3',
blending: 1,
distortion: 0,
clip: false,
angle: 0,
seed: 455,
roughness: 1,
roughnessSize: 0.5,
roughnessRows: 0.6,
fiber: 0.7,
fiberSize: 1,
folds: 0,
foldSizeX: 0,
foldSizeY: 0.44,
foldOffsetX: 0,
foldOffsetY: 0,
wrinkles: 0,
wrinkleSize: 0,
crumples: 0,
crumpleCount: 6,
drops: 0.2,
},
};
export const paperTexturePresets: PaperTexturePreset[] = [
defaultPreset,
spreadPreset,
creasedPreset,
flatPreset,
] as const;
export const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperTextureImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
image = '',
colorBack = defaultPreset.params.colorBack,
colorPaper = defaultPreset.params.colorPaper,
colorShadow = defaultPreset.params.colorShadow,
blending = defaultPreset.params.blending,
distortion = defaultPreset.params.distortion,
clip = defaultPreset.params.clip,
angle = defaultPreset.params.angle,
seed = defaultPreset.params.seed,
roughness = defaultPreset.params.roughness,
roughnessSize = defaultPreset.params.roughnessSize,
roughnessRows = defaultPreset.params.roughnessRows,
fiber = defaultPreset.params.fiber,
fiberScale,
fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,
folds = defaultPreset.params.folds,
foldSizeX = defaultPreset.params.foldSizeX,
foldSizeY = defaultPreset.params.foldSizeY,
foldOffsetX = defaultPreset.params.foldOffsetX,
foldOffsetY = defaultPreset.params.foldOffsetY,
wrinkles = defaultPreset.params.wrinkles,
wrinkleSize = defaultPreset.params.wrinkleSize,
crumples = defaultPreset.params.crumples,
foldsNumber,
crumpleCount = foldsNumber === undefined ? defaultPreset.params.crumpleCount : foldsNumber,
drops = defaultPreset.params.drops,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: PaperTextureProps) {
const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };
const uniforms = {
// Own uniforms
u_image: image,
u_isImage: Boolean(image),
u_colorBack: getShaderColorFromString(colorBack),
u_colorPaper: getShaderColorFromString(colorPaper),
u_colorShadow: getShaderColorFromString(colorShadow),
u_blending: blending,
u_distortion: distortion,
u_clip: clip,
u_angle: angle,
u_seed: seed,
u_roughness: roughness,
u_roughnessSize: roughnessSize,
u_roughnessRows: roughnessRows,
u_fiber: fiber,
u_fiberSize: fiberSize,
u_folds: folds,
u_foldSizeX: foldSizeX,
u_foldSizeY: foldSizeY,
u_foldOffsetX: foldOffsetX,
u_foldOffsetY: foldOffsetY,
u_wrinkles: wrinkles,
u_wrinkleSize: wrinkleSize,
u_crumples: crumples,
u_crumpleCount: crumpleCount,
u_drops: drops,
...noiseTexture,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies PaperTextureUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={paperTextureFragmentShader}
mipmaps={['u_image']}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/perlin-noise.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultPatternSizing,
getShaderColorFromString,
perlinNoiseFragmentShader,
ShaderFitOptions,
type PerlinNoiseParams,
type PerlinNoiseUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParams {}
type PerlinNoisePreset = ShaderPreset<PerlinNoiseParams>;
export const defaultPreset: PerlinNoisePreset = {
name: 'Default',
params: {
...defaultPatternSizing,
speed: 0.5,
frame: 0,
colorBack: '#632ad5',
colorFront: '#fccff7',
proportion: 0.35,
softness: 0.1,
octaveCount: 1,
persistence: 1,
lacunarity: 1.5,
},
};
export const nintendoWaterPreset: PerlinNoisePreset = {
name: 'Nintendo Water',
params: {
...defaultPatternSizing,
scale: 1 / 0.2,
speed: 0.4,
frame: 0,
colorBack: '#2d69d4',
colorFront: '#d1eefc',
proportion: 0.42,
softness: 0,
octaveCount: 2,
persistence: 0.55,
lacunarity: 1.8,
},
};
export const mossPreset: PerlinNoisePreset = {
name: 'Moss',
params: {
...defaultPatternSizing,
scale: 1 / 0.15,
speed: 0.02,
frame: 0,
colorBack: '#05ff4a',
colorFront: '#262626',
proportion: 0.65,
softness: 0.35,
octaveCount: 6,
persistence: 1,
lacunarity: 2.55,
},
};
export const wormsPreset: PerlinNoisePreset = {
name: 'Worms',
params: {
...defaultPatternSizing,
scale: 0.9,
speed: 0,
frame: 0,
colorBack: '#ffffff00',
colorFront: '#595959',
proportion: 0.5,
softness: 0,
octaveCount: 1,
persistence: 1,
lacunarity: 1.5,
},
};
export const perlinNoisePresets: PerlinNoisePreset[] = [defaultPreset, nintendoWaterPreset, mossPreset, wormsPreset];
export const PerlinNoise: React.FC<PerlinNoiseProps> = memo(function PerlinNoiseImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorFront = defaultPreset.params.colorFront,
colorBack = defaultPreset.params.colorBack,
proportion = defaultPreset.params.proportion,
softness = defaultPreset.params.softness,
octaveCount = defaultPreset.params.octaveCount,
persistence = defaultPreset.params.persistence,
lacunarity,
// Sizing props
fit = defaultPreset.params.fit,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
...props
}: PerlinNoiseProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colorFront: getShaderColorFromString(colorFront),
u_proportion: proportion,
u_softness: softness ?? defaultPreset.params.softness,
u_octaveCount: octaveCount ?? defaultPreset.params.octaveCount,
u_persistence: persistence ?? defaultPreset.params.persistence,
u_lacunarity: lacunarity ?? defaultPreset.params.lacunarity,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies PerlinNoiseUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={perlinNoiseFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/pulsing-border.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderColorFromString,
getShaderNoiseTexture,
pulsingBorderFragmentShader,
ShaderFitOptions,
type PulsingBorderParams,
type PulsingBorderUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
import { PulsingBorderAspectRatios } from '@paper-design/shaders';
export interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}
type PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;
export const defaultPreset: PulsingBorderPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
scale: 0.6,
colorBack: '#000000',
colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],
roundness: 0.25,
thickness: 0.1,
margin: 0,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
aspectRatio: 'auto',
softness: 0.75,
intensity: 0.2,
bloom: 0.25,
spots: 4,
spotSize: 0.5,
pulse: 0.25,
smoke: 0.3,
smokeSize: 0.6,
},
};
export const circlePreset: PulsingBorderPreset = {
name: 'Circle',
params: {
...defaultObjectSizing,
aspectRatio: 'square',
scale: 0.6,
speed: 1,
frame: 0,
colorBack: '#000000',
colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],
roundness: 1,
margin: 0,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
thickness: 0,
softness: 0.75,
intensity: 0.2,
bloom: 0.45,
spots: 3,
spotSize: 0.4,
pulse: 0.5,
smoke: 1,
smokeSize: 0,
},
};
export const northernLightsPreset: PulsingBorderPreset = {
name: 'Northern lights',
params: {
...defaultObjectSizing,
speed: 0.18,
scale: 1.1,
frame: 0,
colors: ['#4c4794', '#774a7d', '#12694a', '#0aff78', '#4733cc'],
colorBack: '#0c182c',
roundness: 0,
thickness: 1,
softness: 1,
margin: 0,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
aspectRatio: 'auto',
intensity: 0.1,
bloom: 0.2,
spots: 4,
spotSize: 0.25,
pulse: 0,
smoke: 0.32,
smokeSize: 0.5,
},
};
export const solidLinePreset: PulsingBorderPreset = {
name: 'Solid line',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colors: ['#81ADEC'],
colorBack: '#00000000',
roundness: 0,
thickness: 0.05,
margin: 0,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
aspectRatio: 'auto',
softness: 0.0,
intensity: 0.0,
bloom: 0.15,
spots: 4,
spotSize: 1,
pulse: 0,
smoke: 0,
smokeSize: 0,
},
};
export const pulsingBorderPresets: PulsingBorderPreset[] = [
defaultPreset,
circlePreset,
northernLightsPreset,
solidLinePreset,
];
export const PulsingBorder: React.FC<PulsingBorderProps> = memo(function PulsingBorderImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colors = defaultPreset.params.colors,
colorBack = defaultPreset.params.colorBack,
roundness = defaultPreset.params.roundness,
thickness = defaultPreset.params.thickness,
aspectRatio = defaultPreset.params.aspectRatio,
softness = defaultPreset.params.softness,
bloom = defaultPreset.params.bloom,
intensity = defaultPreset.params.intensity,
spots = defaultPreset.params.spots,
spotSize = defaultPreset.params.spotSize,
pulse = defaultPreset.params.pulse,
smoke = defaultPreset.params.smoke,
smokeSize = defaultPreset.params.smokeSize,
margin,
marginLeft = margin ?? defaultPreset.params.marginLeft,
marginRight = margin ?? defaultPreset.params.marginRight,
marginTop = margin ?? defaultPreset.params.marginTop,
marginBottom = margin ?? defaultPreset.params.marginBottom,
// Sizing props
fit = defaultPreset.params.fit,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: PulsingBorderProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_roundness: roundness,
u_thickness: thickness,
u_marginLeft: marginLeft,
u_marginRight: marginRight,
u_marginTop: marginTop,
u_marginBottom: marginBottom,
u_aspectRatio: PulsingBorderAspectRatios[aspectRatio],
u_softness: softness,
u_intensity: intensity,
u_bloom: bloom,
u_spots: spots,
u_spotSize: spotSize,
u_pulse: pulse,
u_smoke: smoke,
u_smokeSize: smokeSize,
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies PulsingBorderUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={pulsingBorderFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/simplex-noise.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
getShaderColorFromString,
simplexNoiseFragmentShader,
ShaderFitOptions,
type SimplexNoiseUniforms,
type SimplexNoiseParams,
type ShaderPreset,
defaultPatternSizing,
} from '@paper-design/shaders';
export interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {}
type SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;
export const defaultPreset: SimplexNoisePreset = {
name: 'Default',
params: {
...defaultPatternSizing,
scale: 0.6,
speed: 0.5,
frame: 0,
colors: ['#4449CF', '#FFD1E0', '#F94446', '#FFD36B', '#FFFFFF'],
stepsPerColor: 2,
softness: 0,
},
};
export const bubblegumPreset: SimplexNoisePreset = {
name: 'Bubblegum',
params: {
...defaultPatternSizing,
speed: 2,
frame: 0,
colors: ['#ffffff', '#ff9e9e', '#5f57ff', '#00f7ff'],
stepsPerColor: 1,
softness: 1.0,
scale: 1.6,
},
};
export const spotsPreset: SimplexNoisePreset = {
name: 'Spots',
params: {
...defaultPatternSizing,
speed: 0.6,
frame: 0,
colors: ['#ff7b00', '#f9ffeb', '#320d82'],
stepsPerColor: 1,
softness: 0.0,
scale: 1.0,
},
};
export const firstContactPreset: SimplexNoisePreset = {
name: 'First contact',
params: {
...defaultPatternSizing,
speed: 2,
frame: 0,
colors: ['#e8cce6', '#120d22', '#442c44', '#e6baba', '#fff5f5'],
stepsPerColor: 2,
softness: 0.0,
scale: 0.2,
},
};
export const simplexNoisePresets: SimplexNoisePreset[] = [
defaultPreset,
spotsPreset,
firstContactPreset,
bubblegumPreset,
];
export const SimplexNoise: React.FC<SimplexNoiseProps> = memo(function SimplexNoiseImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colors = defaultPreset.params.colors,
stepsPerColor = defaultPreset.params.stepsPerColor,
softness = defaultPreset.params.softness,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: SimplexNoiseProps) {
const uniforms = {
// Own uniforms
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_stepsPerColor: stepsPerColor,
u_softness: softness,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies SimplexNoiseUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={simplexNoiseFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/smoke-ring.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderColorFromString,
getShaderNoiseTexture,
smokeRingFragmentShader,
ShaderFitOptions,
type ShaderPreset,
type SmokeRingParams,
type SmokeRingUniforms,
} from '@paper-design/shaders';
export interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}
type SmokeRingPreset = ShaderPreset<SmokeRingParams>;
export const defaultPreset: SmokeRingPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
speed: 0.5,
frame: 0,
colorBack: '#000000',
colors: ['#ffffff'],
noiseScale: 3,
noiseIterations: 8,
radius: 0.25,
thickness: 0.65,
innerShape: 0.7,
scale: 0.8,
},
};
export const solarPreset: SmokeRingPreset = {
name: 'Solar',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colorBack: '#000000',
colors: ['#ffffff', '#ffca0a', '#fc6203', '#fc620366'],
noiseScale: 2,
noiseIterations: 3,
radius: 0.4,
thickness: 0.8,
innerShape: 4,
scale: 2,
offsetY: 1,
},
};
export const linePreset: SmokeRingPreset = {
name: 'Line',
params: {
...defaultObjectSizing,
frame: 0,
colorBack: '#000000',
colors: ['#4540a4', '#1fe8ff'],
noiseScale: 1.1,
noiseIterations: 2,
radius: 0.38,
thickness: 0.01,
innerShape: 0.88,
speed: 4,
},
};
export const cloudPreset: SmokeRingPreset = {
name: 'Cloud',
params: {
...defaultObjectSizing,
frame: 0,
colorBack: '#81ADEC',
colors: ['#ffffff'],
noiseScale: 3,
noiseIterations: 10,
radius: 0.5,
thickness: 0.65,
innerShape: 0.85,
speed: 0.5,
scale: 2.5,
},
};
export const smokeRingPresets: SmokeRingPreset[] = [defaultPreset, linePreset, solarPreset, cloudPreset];
export const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
noiseScale = defaultPreset.params.noiseScale,
thickness = defaultPreset.params.thickness,
radius = defaultPreset.params.radius,
innerShape = defaultPreset.params.innerShape,
noiseIterations = defaultPreset.params.noiseIterations,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: SmokeRingProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_noiseScale: noiseScale,
u_thickness: thickness,
u_radius: radius,
u_innerShape: innerShape,
u_noiseIterations: noiseIterations,
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies SmokeRingUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={smokeRingFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/spiral.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultPatternSizing,
getShaderColorFromString,
ShaderFitOptions,
spiralFragmentShader,
type ShaderPreset,
type SpiralParams,
type SpiralUniforms,
} from '@paper-design/shaders';
export interface SpiralProps extends ShaderComponentProps, SpiralParams {}
type SpiralPreset = ShaderPreset<SpiralParams>;
export const defaultPreset: SpiralPreset = {
name: 'Default',
params: {
...defaultPatternSizing,
scale: 1,
colorBack: '#001429',
colorFront: '#79D1FF',
density: 1,
distortion: 0,
strokeWidth: 0.5,
strokeTaper: 0,
strokeCap: 0,
noise: 0,
noiseFrequency: 0,
softness: 0,
speed: 1,
frame: 0,
},
};
export const dropletPreset: SpiralPreset = {
name: 'Droplet',
params: {
...defaultPatternSizing,
colorBack: '#effafe',
colorFront: '#bf40a0',
density: 0.9,
distortion: 0,
strokeWidth: 0.75,
strokeTaper: 0.18,
strokeCap: 1,
noise: 0.74,
noiseFrequency: 0.33,
softness: 0.02,
speed: 1,
frame: 0,
},
};
export const junglePreset: SpiralPreset = {
name: 'Jungle',
params: {
...defaultPatternSizing,
scale: 1.3,
density: 0.5,
colorBack: '#a0ef2a',
colorFront: '#288b18',
distortion: 0,
strokeWidth: 0.5,
strokeTaper: 0,
strokeCap: 0,
noise: 1,
noiseFrequency: 0.25,
softness: 0,
speed: 0.75,
frame: 0,
},
};
export const swirlPreset: SpiralPreset = {
name: 'Swirl',
params: {
...defaultPatternSizing,
scale: 0.45,
colorBack: '#b3e6d9',
colorFront: '#1a2b4d',
density: 0.2,
distortion: 0,
strokeWidth: 0.5,
strokeTaper: 0,
strokeCap: 0,
noise: 0,
noiseFrequency: 0.3,
softness: 0.5,
speed: 1,
frame: 0,
},
};
export const spiralPresets: SpiralPreset[] = [defaultPreset, junglePreset, dropletPreset, swirlPreset];
export const Spiral: React.FC<SpiralProps> = memo(function SpiralImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colorFront = defaultPreset.params.colorFront,
density = defaultPreset.params.density,
distortion = defaultPreset.params.distortion,
strokeWidth = defaultPreset.params.strokeWidth,
strokeTaper = defaultPreset.params.strokeTaper,
strokeCap = defaultPreset.params.strokeCap,
noiseFrequency = defaultPreset.params.noiseFrequency,
noise = defaultPreset.params.noise,
softness = defaultPreset.params.softness,
// Sizing props
fit = defaultPreset.params.fit,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: SpiralProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colorFront: getShaderColorFromString(colorFront),
u_density: density,
u_distortion: distortion,
u_strokeWidth: strokeWidth,
u_strokeTaper: strokeTaper,
u_strokeCap: strokeCap,
u_noiseFrequency: noiseFrequency,
u_noise: noise,
u_softness: softness,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies SpiralUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={spiralFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/static-mesh-gradient.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderColorFromString,
staticMeshGradientFragmentShader,
ShaderFitOptions,
type StaticMeshGradientParams,
type StaticMeshGradientUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface StaticMeshGradientProps extends ShaderComponentProps, StaticMeshGradientParams {}
type StaticMeshGradientPreset = ShaderPreset<StaticMeshGradientParams>;
export const defaultPreset: StaticMeshGradientPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
rotation: 270,
speed: 0,
frame: 0,
colors: ['#ffad0a', '#6200ff', '#e2a3ff', '#ff99fd'],
positions: 2,
waveX: 1.0,
waveXShift: 0.6,
waveY: 1.0,
waveYShift: 0.21,
mixing: 0.93,
grainMixer: 0.0,
grainOverlay: 0.0,
},
};
export const seaPreset: StaticMeshGradientPreset = {
name: 'Sea',
params: {
...defaultObjectSizing,
speed: 0,
frame: 0,
colors: ['#013b65', '#03738c', '#a3d3ff', '#f2faef'],
positions: 0,
waveX: 0.53,
waveXShift: 0.0,
waveY: 0.95,
waveYShift: 0.64,
mixing: 0.5,
grainMixer: 0.0,
grainOverlay: 0.0,
},
};
export const sixtiesPreset: StaticMeshGradientPreset = {
name: '1960s',
params: {
...defaultObjectSizing,
speed: 0,
frame: 0,
colors: ['#000000', '#082400', '#b1aa91', '#8e8c15'],
positions: 42,
waveX: 0.45,
waveXShift: 0.0,
waveY: 1.0,
waveYShift: 0.0,
mixing: 0.0,
grainMixer: 0.37,
grainOverlay: 0.78,
},
};
export const sunsetPreset: StaticMeshGradientPreset = {
name: 'Sunset',
params: {
...defaultObjectSizing,
speed: 0,
frame: 0,
colors: ['#264653', '#9c2b2b', '#f4a261', '#ffffff'],
positions: 0,
waveX: 0.6,
waveXShift: 0.7,
waveY: 0.7,
waveYShift: 0.7,
mixing: 0.5,
grainMixer: 0,
grainOverlay: 0,
},
};
export const staticMeshGradientPresets: StaticMeshGradientPreset[] = [
defaultPreset,
sixtiesPreset,
sunsetPreset,
seaPreset,
];
export const StaticMeshGradient: React.FC<StaticMeshGradientProps> = memo(function StaticMeshGradientImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colors = defaultPreset.params.colors,
positions = defaultPreset.params.positions,
waveX = defaultPreset.params.waveX,
waveXShift = defaultPreset.params.waveXShift,
waveY = defaultPreset.params.waveY,
waveYShift = defaultPreset.params.waveYShift,
mixing = defaultPreset.params.mixing,
grainMixer = defaultPreset.params.grainMixer,
grainOverlay = defaultPreset.params.grainOverlay,
// Sizing props
fit = defaultPreset.params.fit,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: StaticMeshGradientProps) {
const uniforms = {
// Own uniforms
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_positions: positions,
u_waveX: waveX,
u_waveXShift: waveXShift,
u_waveY: waveY,
u_waveYShift: waveYShift,
u_mixing: mixing,
u_grainMixer: grainMixer,
u_grainOverlay: grainOverlay,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies StaticMeshGradientUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={staticMeshGradientFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/static-radial-gradient.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultObjectSizing,
getShaderColorFromString,
staticRadialGradientFragmentShader,
ShaderFitOptions,
type StaticRadialGradientParams,
type StaticRadialGradientUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface StaticRadialGradientProps extends ShaderComponentProps, StaticRadialGradientParams {}
type StaticRadialGradientPreset = ShaderPreset<StaticRadialGradientParams>;
export const defaultPreset: StaticRadialGradientPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 1,
speed: 0,
frame: 0,
colorBack: '#000000',
colors: ['#00bbff', '#00ffe1', '#ffffff'],
radius: 0.8,
focalDistance: 0.99,
focalAngle: 0,
falloff: 0.24,
mixing: 0.5,
distortion: 0.0,
distortionShift: 0,
distortionFreq: 12,
grainMixer: 0.0,
grainOverlay: 0.0,
},
};
export const crossSectionPreset: StaticRadialGradientPreset = {
name: 'Cross Section',
params: {
...defaultObjectSizing,
scale: 1,
speed: 0,
frame: 0,
colorBack: '#3d348b',
colors: ['#7678ed', '#f7b801', '#f18701', '#37a066'],
radius: 1,
focalDistance: 0,
focalAngle: 0,
falloff: 0,
mixing: 0,
distortion: 1,
distortionShift: 0,
distortionFreq: 12,
grainMixer: 0,
grainOverlay: 0,
},
};
export const radialPreset: StaticRadialGradientPreset = {
name: 'Radial',
params: {
...defaultObjectSizing,
scale: 1,
speed: 0,
frame: 0,
colorBack: '#264653',
colors: ['#9c2b2b', '#f4a261', '#ffffff'],
radius: 1,
focalDistance: 0,
focalAngle: 0,
falloff: 0,
mixing: 1,
distortion: 0,
distortionShift: 0,
distortionFreq: 12,
grainMixer: 0,
grainOverlay: 0,
},
};
export const loFiPreset: StaticRadialGradientPreset = {
name: 'Lo-Fi',
params: {
...defaultObjectSizing,
speed: 0,
frame: 0,
colorBack: '#2e1f27',
colors: ['#d72638', '#3f88c5', '#f49d37'],
radius: 1,
focalDistance: 0,
focalAngle: 0,
falloff: 0.9,
mixing: 0.7,
distortion: 0,
distortionShift: 0,
distortionFreq: 12,
grainMixer: 1,
grainOverlay: 0.5,
},
};
export const staticRadialGradientPresets: StaticRadialGradientPreset[] = [
defaultPreset,
loFiPreset,
crossSectionPreset,
radialPreset,
];
export const StaticRadialGradient: React.FC<StaticRadialGradientProps> = memo(function StaticRadialGradientImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
radius = defaultPreset.params.radius,
focalDistance = defaultPreset.params.focalDistance,
focalAngle = defaultPreset.params.focalAngle,
falloff = defaultPreset.params.falloff,
grainMixer = defaultPreset.params.grainMixer,
mixing = defaultPreset.params.mixing,
distortion = defaultPreset.params.distortion,
distortionShift = defaultPreset.params.distortionShift,
distortionFreq = defaultPreset.params.distortionFreq,
grainOverlay = defaultPreset.params.grainOverlay,
// Sizing props
fit = defaultPreset.params.fit,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: StaticRadialGradientProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_radius: radius,
u_focalDistance: focalDistance,
u_focalAngle: focalAngle,
u_falloff: falloff,
u_mixing: mixing,
u_distortion: distortion,
u_distortionShift: distortionShift,
u_distortionFreq: distortionFreq,
u_grainMixer: grainMixer,
u_grainOverlay: grainOverlay,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies StaticRadialGradientUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={staticRadialGradientFragmentShader}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/swirl.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import {
defaultObjectSizing,
getShaderColorFromString,
ShaderFitOptions,
swirlFragmentShader,
type ShaderPreset,
type SwirlParams,
type SwirlUniforms,
} from '@paper-design/shaders';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
export interface SwirlProps extends ShaderComponentProps, SwirlParams {}
type SwirlPreset = ShaderPreset<SwirlParams>;
export const defaultPreset: SwirlPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
speed: 0.32,
frame: 0,
colorBack: '#330000',
colors: ['#ffd1d1', '#ff8a8a', '#660000'],
bandCount: 4,
twist: 0.1,
center: 0.2,
proportion: 0.5,
softness: 0,
noiseFrequency: 0.4,
noise: 0.2,
},
};
export const openingPreset: SwirlPreset = {
name: 'Opening',
params: {
...defaultObjectSizing,
offsetX: -0.4,
offsetY: 1,
speed: 0.5,
frame: 0,
colorBack: '#ff8b61',
colors: ['#fefff0', '#ffd8bd', '#ff8b61'],
bandCount: 2,
twist: 0.3,
center: 0.2,
proportion: 0.5,
softness: 0,
noiseFrequency: 0,
noise: 0,
scale: 1,
},
} as const;
export const jamesBondPreset: SwirlPreset = {
name: '007',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colorBack: '#E9E7DA',
colors: ['#000000'],
bandCount: 5,
twist: 0.3,
center: 0,
proportion: 0,
softness: 0,
noiseFrequency: 0.5,
noise: 0,
},
} as const;
export const candyPreset: SwirlPreset = {
name: 'Candy',
params: {
...defaultObjectSizing,
speed: 1,
frame: 0,
colorBack: '#ffcd66',
colors: ['#6bbceb', '#d7b3ff', '#ff9fff'],
bandCount: 2,
twist: 0.15,
center: 0.2,
proportion: 0.5,
softness: 1,
noiseFrequency: 0.5,
noise: 0,
},
} as const;
export const swirlPresets: SwirlPreset[] = [defaultPreset, jamesBondPreset, openingPreset, candyPreset];
export const Swirl: React.FC<SwirlProps> = memo(function SwirlImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colors = defaultPreset.params.colors,
bandCount = defaultPreset.params.bandCount,
twist = defaultPreset.params.twist,
center = defaultPreset.params.center,
proportion = defaultPreset.params.proportion,
softness = defaultPreset.params.softness,
noiseFrequency = defaultPreset.params.noiseFrequency,
noise = defaultPreset.params.noise,
// Sizing props
fit = defaultPreset.params.fit,
rotation = defaultPreset.params.rotation,
scale = defaultPreset.params.scale,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: SwirlProps) {
const uniforms = {
// Own uniforms
u_colorBack: getShaderColorFromString(colorBack),
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_bandCount: bandCount,
u_twist: twist,
u_center: center,
u_proportion: proportion,
u_softness: softness,
u_noiseFrequency: noiseFrequency,
u_noise: noise,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies SwirlUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={swirlFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/voronoi.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultPatternSizing,
getShaderColorFromString,
getShaderNoiseTexture,
voronoiFragmentShader,
ShaderFitOptions,
type VoronoiParams,
type VoronoiUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface VoronoiProps extends ShaderComponentProps, VoronoiParams {}
type VoronoiPreset = ShaderPreset<VoronoiParams>;
export const defaultPreset: VoronoiPreset = {
name: 'Default',
params: {
...defaultPatternSizing,
speed: 0.5,
frame: 0,
colors: ['#ff8247', '#ffe53d'],
stepsPerColor: 3,
colorGlow: '#ffffff',
colorGap: '#2e0000',
distortion: 0.4,
gap: 0.04,
glow: 0,
scale: 0.5,
},
};
export const cellsPreset: VoronoiPreset = {
name: 'Cells',
params: {
...defaultPatternSizing,
scale: 0.5,
speed: 0.5,
frame: 0,
colors: ['#ffffff'],
stepsPerColor: 1,
colorGlow: '#ffffff',
colorGap: '#000000',
distortion: 0.5,
gap: 0.03,
glow: 0.8,
},
};
export const bubblesPreset: VoronoiPreset = {
name: 'Bubbles',
params: {
...defaultPatternSizing,
scale: 0.75,
speed: 0.5,
frame: 0,
colors: ['#83c9fb'],
stepsPerColor: 1,
colorGlow: '#ffffff',
colorGap: '#ffffff',
distortion: 0.4,
gap: 0,
glow: 1,
},
};
export const lightsPreset: VoronoiPreset = {
name: 'Lights',
params: {
...defaultPatternSizing,
scale: 3.3,
speed: 0.5,
frame: 0,
colors: ['#fffffffc', '#bbff00', '#00ffff'],
colorGlow: '#ff00d0',
colorGap: '#ff00d0',
stepsPerColor: 2,
distortion: 0.38,
gap: 0.0,
glow: 1.0,
},
};
export const voronoiPresets: VoronoiPreset[] = [defaultPreset, lightsPreset, cellsPreset, bubblesPreset];
export const Voronoi: React.FC<VoronoiProps> = memo(function VoronoiImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colors = defaultPreset.params.colors,
stepsPerColor = defaultPreset.params.stepsPerColor,
colorGlow = defaultPreset.params.colorGlow,
colorGap = defaultPreset.params.colorGap,
distortion = defaultPreset.params.distortion,
gap = defaultPreset.params.gap,
glow = defaultPreset.params.glow,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: VoronoiProps) {
const uniforms = {
// Own uniforms
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_stepsPerColor: stepsPerColor,
u_colorGlow: getShaderColorFromString(colorGlow),
u_colorGap: getShaderColorFromString(colorGap),
u_distortion: distortion,
u_gap: gap,
u_glow: glow,
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies VoronoiUniforms;
return (
<ShaderMount {...props} speed={speed} frame={frame} fragmentShader={voronoiFragmentShader} uniforms={uniforms} />
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/warp.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultPatternSizing,
getShaderColorFromString,
getShaderNoiseTexture,
warpFragmentShader,
ShaderFitOptions,
type WarpParams,
type WarpUniforms,
type ShaderPreset,
WarpPatterns,
} from '@paper-design/shaders';
export interface WarpProps extends ShaderComponentProps, WarpParams {}
type WarpPreset = ShaderPreset<WarpParams>;
export const defaultPreset: WarpPreset = {
name: 'Default',
params: {
...defaultPatternSizing,
rotation: 0,
speed: 1,
frame: 0,
colors: ['#121212', '#9470ff', '#121212', '#8838ff'],
proportion: 0.45,
softness: 1,
distortion: 0.25,
swirl: 0.8,
swirlIterations: 10,
shapeScale: 0.1,
shape: 'checks',
},
};
export const presetCauldron: WarpPreset = {
name: 'Cauldron Pot',
params: {
...defaultPatternSizing,
scale: 0.9,
rotation: 160,
speed: 10,
frame: 0,
colors: ['#a7e58b', '#324472', '#0a180d'],
proportion: 0.64,
softness: 1.5,
distortion: 0.2,
swirl: 0.86,
swirlIterations: 7,
shapeScale: 0.6,
shape: 'edge',
},
};
export const presetInk: WarpPreset = {
name: 'Live Ink',
params: {
...defaultPatternSizing,
scale: 1.2,
rotation: 44,
offsetY: -0.3,
speed: 2.5,
frame: 0,
colors: ['#111314', '#9faeab', '#f3fee7', '#f3fee7'],
proportion: 0.05,
softness: 0,
distortion: 0.25,
swirl: 0.8,
swirlIterations: 10,
shapeScale: 0.28,
shape: 'checks',
},
};
export const presetKelp: WarpPreset = {
name: 'Kelp',
params: {
...defaultPatternSizing,
scale: 0.8,
rotation: 50,
speed: 20,
frame: 0,
colors: ['#dbff8f', '#404f3e', '#091316'],
proportion: 0.67,
softness: 0,
distortion: 0,
swirl: 0.2,
swirlIterations: 3,
shapeScale: 1,
shape: 'stripes',
},
};
export const presetNectar: WarpPreset = {
name: 'Nectar',
params: {
...defaultPatternSizing,
scale: 2,
offsetY: 0.6,
rotation: 0,
speed: 4.2,
frame: 0,
colors: ['#151310', '#d3a86b', '#f0edea'],
proportion: 0.24,
softness: 1,
distortion: 0.21,
swirl: 0.57,
swirlIterations: 10,
shapeScale: 0.75,
shape: 'edge',
},
};
export const presetPassion: WarpPreset = {
name: 'Passion',
params: {
...defaultPatternSizing,
scale: 2.5,
rotation: 1.35,
speed: 3,
frame: 0,
colors: ['#3b1515', '#954751', '#ffc085'],
proportion: 0.5,
softness: 1,
distortion: 0.09,
swirl: 0.9,
swirlIterations: 6,
shapeScale: 0.25,
shape: 'checks',
},
};
export const warpPresets: WarpPreset[] = [
defaultPreset,
presetCauldron,
presetInk,
presetKelp,
presetNectar,
presetPassion,
];
export const Warp: React.FC<WarpProps> = memo(function WarpImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colors = defaultPreset.params.colors,
proportion = defaultPreset.params.proportion,
softness = defaultPreset.params.softness,
distortion = defaultPreset.params.distortion,
swirl = defaultPreset.params.swirl,
swirlIterations = defaultPreset.params.swirlIterations,
shapeScale = defaultPreset.params.shapeScale,
shape = defaultPreset.params.shape,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: WarpProps) {
const uniforms = {
// Own uniforms
u_colors: colors.map(getShaderColorFromString),
u_colorsCount: colors.length,
u_proportion: proportion,
u_softness: softness,
u_distortion: distortion,
u_swirl: swirl,
u_swirlIterations: swirlIterations,
u_shapeScale: shapeScale,
u_shape: WarpPatterns[shape],
u_noiseTexture: getShaderNoiseTexture(),
// Sizing uniforms
u_scale: scale,
u_rotation: rotation,
u_fit: ShaderFitOptions[fit],
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies WarpUniforms;
return <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={warpFragmentShader} uniforms={uniforms} />;
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/water.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
waterFragmentShader,
getShaderColorFromString,
ShaderFitOptions,
type WaterUniforms,
type WaterParams,
defaultObjectSizing,
type ImageShaderPreset,
} from '@paper-design/shaders';
export interface WaterProps extends ShaderComponentProps, WaterParams {
/** @deprecated use `size` instead */
effectScale?: number;
}
type WaterPreset = ImageShaderPreset<WaterParams>;
export const defaultPreset: WaterPreset = {
name: 'Default',
params: {
...defaultObjectSizing,
scale: 0.8,
speed: 1,
frame: 0,
colorBack: '#909090',
colorHighlight: '#ffffff',
highlights: 0.07,
layering: 0.5,
edges: 0.8,
waves: 0.3,
caustic: 0.1,
size: 1,
},
};
export const abstractPreset: WaterPreset = {
name: 'Abstract',
params: {
...defaultObjectSizing,
fit: 'cover',
scale: 3,
speed: 1,
frame: 0,
colorBack: '#909090',
colorHighlight: '#ffffff',
highlights: 0,
layering: 0,
edges: 1,
waves: 1,
caustic: 0.4,
size: 0.15,
},
};
export const streamingPreset: WaterPreset = {
name: 'Streaming',
params: {
...defaultObjectSizing,
fit: 'contain',
scale: 0.4,
speed: 2,
frame: 0,
colorBack: '#909090',
colorHighlight: '#ffffff',
highlights: 0,
layering: 0,
edges: 0,
waves: 0.5,
caustic: 0,
size: 0.5,
},
};
export const slowMoPreset: WaterPreset = {
name: 'Slow-mo',
params: {
...defaultObjectSizing,
fit: 'cover',
scale: 1,
speed: 0.1,
frame: 0,
colorBack: '#909090',
colorHighlight: '#ffffff',
highlights: 0.4,
layering: 0,
edges: 0,
waves: 0,
caustic: 0.2,
size: 0.7,
},
};
export const waterPresets: WaterPreset[] = [defaultPreset, slowMoPreset, abstractPreset, streamingPreset];
export const Water: React.FC<WaterProps> = memo(function WaterImpl({
// Own props
speed = defaultPreset.params.speed,
frame = defaultPreset.params.frame,
colorBack = defaultPreset.params.colorBack,
colorHighlight = defaultPreset.params.colorHighlight,
image = '',
highlights = defaultPreset.params.highlights,
layering = defaultPreset.params.layering,
waves = defaultPreset.params.waves,
edges = defaultPreset.params.edges,
caustic = defaultPreset.params.caustic,
// `effectScale` was deprecated in favor of `size`
// (it was a reverse value by mistake, so we took the opportunity to rename the param too)
effectScale,
size = effectScale === undefined ? defaultPreset.params.size : 10 / 9 / effectScale - 1 / 9,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
...props
}: WaterProps) {
const uniforms = {
// Own uniforms
u_image: image,
u_colorBack: getShaderColorFromString(colorBack),
u_colorHighlight: getShaderColorFromString(colorHighlight),
u_highlights: highlights,
u_layering: layering,
u_waves: waves,
u_edges: edges,
u_caustic: caustic,
u_size: size,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_rotation: rotation,
u_scale: scale,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies WaterUniforms;
return (
<ShaderMount
{...props}
speed={speed}
frame={frame}
fragmentShader={waterFragmentShader}
mipmaps={['u_image']}
uniforms={uniforms}
/>
);
}, colorPropsAreEqual);
packages/shaders-react/src/shaders/waves.tsx
import { memo } from 'react';
import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
import { colorPropsAreEqual } from '../color-props-are-equal.js';
import {
defaultPatternSizing,
getShaderColorFromString,
wavesFragmentShader,
ShaderFitOptions,
type WavesParams,
type WavesUniforms,
type ShaderPreset,
} from '@paper-design/shaders';
export interface WavesProps extends ShaderComponentProps, WavesParams {}
type WavesPreset = ShaderPreset<WavesParams>;
export const defaultPreset: WavesPreset = {
name: 'Default',
params: {
...defaultPatternSizing,
scale: 0.6,
colorFront: '#ffbb00',
colorBack: '#000000',
shape: 0,
frequency: 0.5,
amplitude: 0.5,
spacing: 1.2,
proportion: 0.1,
softness: 0,
},
};
export const groovyPreset: WavesPreset = {
name: 'Groovy',
params: {
...defaultPatternSizing,
scale: 5,
rotation: 90,
colorFront: '#fcfcee',
colorBack: '#ff896b',
shape: 3,
frequency: 0.2,
amplitude: 0.25,
spacing: 1.17,
proportion: 0.57,
softness: 0,
},
};
export const tangledUpPreset: WavesPreset = {
name: 'Tangled up',
params: {
...defaultPatternSizing,
scale: 0.5,
rotation: 0,
colorFront: '#133a41',
colorBack: '#c2d8b6',
shape: 2.07,
frequency: 0.44,
amplitude: 0.57,
spacing: 1.05,
proportion: 0.75,
softness: 0,
},
};
export const waveRidePreset: WavesPreset = {
name: 'Ride the wave',
params: {
...defaultPatternSizing,
scale: 1.7,
rotation: 0,
colorFront: '#fdffe6',
colorBack: '#1f1f1f',
shape: 2.25,
frequency: 0.2,
amplitude: 1,
spacing: 1.25,
proportion: 1,
softness: 0,
},
};
export const wavesPresets: WavesPreset[] = [defaultPreset, groovyPreset, tangledUpPreset, waveRidePreset];
export const Waves: React.FC<WavesProps> = memo(function WavesImpl({
// Own props
colorFront = defaultPreset.params.colorFront,
colorBack = defaultPreset.params.colorBack,
shape = defaultPreset.params.shape,
frequency = defaultPreset.params.frequency,
amplitude = defaultPreset.params.amplitude,
spacing = defaultPreset.params.spacing,
proportion = defaultPreset.params.proportion,
softness = defaultPreset.params.softness,
// Sizing props
fit = defaultPreset.params.fit,
scale = defaultPreset.params.scale,
rotation = defaultPreset.params.rotation,
offsetX = defaultPreset.params.offsetX,
offsetY = defaultPreset.params.offsetY,
originX = defaultPreset.params.originX,
originY = defaultPreset.params.originY,
worldWidth = defaultPreset.params.worldWidth,
worldHeight = defaultPreset.params.worldHeight,
// Other props
maxPixelCount = 6016 * 3384, // Higher max resolution for this shader
...props
}: WavesProps) {
const uniforms = {
// Own uniforms
u_colorFront: getShaderColorFromString(colorFront),
u_colorBack: getShaderColorFromString(colorBack),
u_shape: shape,
u_frequency: frequency,
u_amplitude: amplitude,
u_spacing: spacing,
u_proportion: proportion,
u_softness: softness,
// Sizing uniforms
u_fit: ShaderFitOptions[fit],
u_scale: scale,
u_rotation: rotation,
u_offsetX: offsetX,
u_offsetY: offsetY,
u_originX: originX,
u_originY: originY,
u_worldWidth: worldWidth,
u_worldHeight: worldHeight,
} satisfies WavesUniforms;
return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;
}, colorPropsAreEqual);
packages/shaders-react/src/suspend.tsx
/**
* A cut down version of suspend-react.
* When paper-shaders only supports React 19+ we can use the use hook instead.
*/
type Tuple<T = any> = [T] | T[];
type Await<T> = T extends Promise<infer V> ? V : never;
type Cache<Keys extends Tuple<unknown>> = {
promise: Promise<unknown>;
keys: Keys;
error?: any;
response?: unknown;
};
const isPromise = (promise: any): promise is Promise<unknown> =>
typeof promise === 'object' && typeof (promise as Promise<any>).then === 'function';
const globalCache: Cache<Tuple<unknown>>[] = [];
function shallowEqualArrays(arrA: any[], arrB: any[]) {
if (arrA === arrB) return true;
if (!arrA || !arrB) return false;
const len = arrA.length;
if (arrB.length !== len) return false;
for (let i = 0; i < len; i++) if (arrA[i] !== arrB[i]) return false;
return true;
}
function query<Keys extends Tuple<unknown>, Fn extends (...keys: Keys) => Promise<unknown>>(
fn: Fn | Promise<unknown>,
keys: Keys = null as unknown as Keys
) {
// If no keys were given, the function is the key
if (keys === null) keys = [fn] as unknown as Keys;
for (const entry of globalCache) {
// Find a match
if (shallowEqualArrays(keys, entry.keys)) {
// If an error occurred, throw
if (Object.prototype.hasOwnProperty.call(entry, 'error')) throw entry.error;
// If a response was successful, return
if (Object.prototype.hasOwnProperty.call(entry, 'response')) {
return entry.response as Await<ReturnType<Fn>>;
}
// If the promise is still unresolved, throw
throw entry.promise;
}
}
// The request is new or has changed.
const entry: Cache<Keys> = {
keys,
promise:
// Execute the promise
(isPromise(fn) ? fn : fn(...keys))
// When it resolves, store its value
.then((response) => {
entry.response = response;
})
// Store caught errors, they will be thrown in the render-phase to bubble into an error-bound
.catch((error) => (entry.error = error)),
};
// Register the entry
globalCache.push(entry);
// And throw the promise, this yields control back to React
throw entry.promise;
}
const suspend = <Keys extends Tuple<unknown>, Fn extends (...keys: Keys) => Promise<unknown>>(
fn: Fn | Promise<unknown>,
keys?: Keys
): Await<ReturnType<Fn>> => query(fn, keys);
export { suspend };
packages/shaders-react/src/transparent-pixel.ts
export const transparentPixel = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
packages/shaders-react/src/use-merge-refs.ts
import * as React from 'react';
/**
* Merges an array of refs into a single memoized callback ref or `null`.
* @see https://floating-ui.com/docs/react-utils#usemergerefs
*/
export function useMergeRefs<Instance>(refs: Array<React.Ref<Instance> | undefined>): null | React.Ref<Instance> {
const cleanupRef = React.useRef<void | (() => void)>(undefined);
const refEffect = React.useCallback((instance: Instance | null) => {
const cleanups = refs.map((ref) => {
if (ref == null) {
return;
}
if (typeof ref === 'function') {
const refCallback = ref;
const refCleanup: void | (() => void) = refCallback(instance);
return typeof refCleanup === 'function'
? refCleanup
: () => {
refCallback(null);
};
}
(ref as React.RefObject<Instance | null>).current = instance;
return () => {
(ref as React.RefObject<Instance | null>).current = null;
};
});
return () => {
cleanups.forEach((refCleanup) => refCleanup?.());
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, refs);
return React.useMemo(() => {
if (refs.every((ref) => ref == null)) {
return null;
}
return (value) => {
if (cleanupRef.current) {
cleanupRef.current();
(cleanupRef as React.RefObject<void | (() => void)>).current = undefined;
}
if (value != null) {
(cleanupRef as React.RefObject<void | (() => void)>).current = refEffect(value);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, refs);
}
packages/shaders/src/empty-pixel.ts
export const emptyPixel = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
packages/shaders/src/get-shader-color-from-string.ts
/** Convert color string from HSL, RGB, or hex to 0-to-1-range-RGBA array */
export function getShaderColorFromString(
colorString: string | [number, number, number] | [number, number, number, number] | undefined
): [number, number, number, number] {
// If the color string is already an array of 3 or 4 numbers, return it (with alpha=1 if needed)
if (Array.isArray(colorString)) {
if (colorString.length === 4) return colorString as [number, number, number, number];
if (colorString.length === 3) return [...colorString, 1];
return fallbackColor;
}
// If the color string is not a string, return the fallback
if (typeof colorString !== 'string') {
return fallbackColor;
}
let r: number,
g: number,
b: number,
a = 1;
if (colorString.startsWith('#')) {
[r, g, b, a] = hexToRgba(colorString);
} else if (colorString.startsWith('rgb')) {
const rgba = parseRgba(colorString);
if (rgba === null) return fallbackColor;
[r, g, b, a] = rgba;
} else if (colorString.startsWith('hsl')) {
const hsla = parseHsla(colorString);
if (hsla === null) return fallbackColor;
[r, g, b, a] = hslaToRgba(hsla);
} else {
console.error('Unsupported color format', colorString);
return fallbackColor;
}
return [clamp(r, 0, 1), clamp(g, 0, 1), clamp(b, 0, 1), clamp(a, 0, 1)];
}
/** Convert hex to RGBA (0 to 1 range) */
function hexToRgba(hex: string): [number, number, number, number] {
// Remove # if present
hex = hex.replace(/^#/, '');
// Expand shorthand hex (3-letter #rgb or 4-letter #rgba) by doubling each digit
if (hex.length === 3 || hex.length === 4) {
hex = hex
.split('')
.map((char) => char + char)
.join('');
}
// Expand six-letter hex to eight-letter (add full opacity if no alpha)
if (hex.length === 6) {
hex = hex + 'ff';
}
// Bail out on malformed hex (wrong length or non-hex characters) so callers
// get the fallback color instead of NaN channels leaking into the shader.
if (!/^[0-9a-f]{8}$/i.test(hex)) {
console.warn('Invalid hex color');
return fallbackColor;
}
// Parse the components
const r = parseInt(hex.slice(0, 2), 16) / 255;
const g = parseInt(hex.slice(2, 4), 16) / 255;
const b = parseInt(hex.slice(4, 6), 16) / 255;
const a = parseInt(hex.slice(6, 8), 16) / 255;
return [r, g, b, a];
}
/** Parse RGBA string to RGBA (0 to 1 range), or null if unparseable */
function parseRgba(rgba: string): [number, number, number, number] | null {
// Match both rgb and rgba patterns
const match = rgba.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);
if (!match) return null;
return [
parseInt(match[1] ?? '0') / 255,
parseInt(match[2] ?? '0') / 255,
parseInt(match[3] ?? '0') / 255,
match[4] === undefined ? 1 : parseFloat(match[4]),
];
}
/** Parse HSLA string, or null if unparseable */
function parseHsla(hsla: string): [number, number, number, number] | null {
const match = hsla.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);
if (!match) return null;
return [
parseInt(match[1] ?? '0'),
parseInt(match[2] ?? '0'),
parseInt(match[3] ?? '0'),
match[4] === undefined ? 1 : parseFloat(match[4]),
];
}
/** Convert HSLA to RGBA (0 to 1 range) */
function hslaToRgba(hsla: [number, number, number, number]): [number, number, number, number] {
const [h, s, l, a] = hsla;
const hDecimal = h / 360;
const sDecimal = s / 100;
const lDecimal = l / 100;
let r, g, b;
if (s === 0) {
r = g = b = lDecimal; // achromatic
} else {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = lDecimal < 0.5 ? lDecimal * (1 + sDecimal) : lDecimal + sDecimal - lDecimal * sDecimal;
const p = 2 * lDecimal - q;
r = hue2rgb(p, q, hDecimal + 1 / 3);
g = hue2rgb(p, q, hDecimal);
b = hue2rgb(p, q, hDecimal - 1 / 3);
}
return [r, g, b, a];
}
export const clamp = (n: number, min: number, max: number): number => Math.min(Math.max(n, min), max);
const fallbackColor = [0.5, 0.5, 0.5, 1] as [number, number, number, number];
packages/shaders/src/get-shader-noise-texture.ts
export function getShaderNoiseTexture(): HTMLImageElement | undefined {
if (typeof window === 'undefined') {
return undefined;
}
const img = new Image();
img.src = noiseSrc;
return img;
}
const noiseSrc =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAADAFBMVEUCAQMBAf7/AgMD/wID//7+/wT+A/4FAmYIAqIKnw7+//4EAisEAUgGBIYIewkFVhEJjAoFAuEFA8GWAv6T/gz+AzER/25z/wu1/w1nAggL/049BQUC/y39BrckAQQp/wr+AZYNOvx9AQkN/pELUvMFaAZTBAgIRgsO/7cJNQT+YgkLwRELIf5O/wlP/v79/q4IGAYLK4+kAQ1tAv4IdMpc/4xNMBF2/lQN2vTFAws9BLf9/3kJJgsMRF3+HwkLxfv9BVL8BHEN/9gMsg7cA/13/vv9OAqWA0sOofP9TAsIe/4FQqoF4Q/aAgsQwnKQAwa5BP0JW21NqgmY/f3Z/wkI7whGjAr7oAkLrGGf/JH8jg4zAj4R0Qr+xQ8VZv1Y/8O6//wfA/5bAT79/lQ1AGn8egkKdom0BgYOsfjtBAVDBoz9/zG0A238P/tsbQ/+A9rIig/HCEtvIgrM/1lwBWgIlmr62Q5qA5FndnEIXa+PthUMrqiRfw6SAodE/0cQm6UOirP5swuMCrEOjvo/dBVSA/79KvCgSBL9M1E/TwjUag/e//2WdPZ2TQ9ZMvfPxRD7aPpmOFqXSPu3pww5B/wR00wTgVf3y6dXW137ffv3c7GNj/icJG+4xvYQ61++CZOVll8p//uXzgyTKg6m/1L47w3cAY8EI1T7xvgKbkr7UsGBJPNsB7xL2wuvd5z3svmDmgipcGT8jez8oP0R6bNYuVpUxRn9LZVkqIijYxK7K/dZBtjH/71ZT/1myfz52fVm2WBfk0vxUFj+Vfv9/9plbfz3yl6VUl+flbNijrpfpfz5TZSGRKAI15X14pSt4vwQKMHOTQlKifz1sKW6A9u2A7R65waprffGcfeY/8iyUsFh3rn4lGERMUHJolveAs+PBdb5iZFuX8S8SH7Ekfe8Lwy0t5cLwsD3s2TzbHXa/478nLtNQ6NtstW15QvaKgr25FJm4vyXwFlPInIPId79dUr77fmr18BGdLHIS/mGx6dKw64L7v6k32XMJrWl8ELA3C70AAAgAElEQVR42gTBCTyUeQMA4P97zIx3ZjDvHGaMYQxjhhm33BGTY8h95sodkaNkXVGhKGdUri+SIxQ6nG36VUhS0rnZ6tsVfR2ibKlta7/d5wH7kMaTxlOVozEoHgU29/ayNC9YlrZdyVT+Lf/dAsDDc/xfzX+MLBa2LK23goK0aXhCxZ8qIAdXYj+c8zviDOtRkhEtRxNajHWLuCtdcfQqV2mgRlpDD6wJpKpBrGON27qa4nNeQOU8ViU0pZ2eCMN5mWO7bfR17Q9ItpsqgZJNJcJSq6cSWiV4q1zIDMmkqzAdpqT8gI5G3qm3YEyliPPG9kiwF7P99ghNn7zLs9EXFvFdLmlOdKBAp2ZyGTcI4JuBPYrWyGCYwgFwOhTmHeYC0zEDSp1iX3W71cqoW332M++OAYJUrEySVX0c5lzmDgLcAQ1yFVVOgQ5l+j1k6TEBidTUek7OF4T2kDYo2eVGwOrglKyGBXYyBrxFv9ptR16B+BJ0IFCsryJve0ZEuzNjLeEcw/0aK/kyku6JW0BiicnCBFptKAQRRNRrtmUV/YOn6GNMHXddsFf1YZCHMnFWgcyp2gnLOWTTBcVQVvM/FTgJAHl0NWHHzL0eqzuRXTDCEO03DoThV3kezhrtpNqKW0Bb3MSSAJMmmVnLEpexS8JrmYOr4KXz1cUmByty3N/sbEzBSP8tfGSCJ3caYDhymsPdGbwO4HAl/+PYDCZNf+H6kofkNk4N4Zn6NM4y1lJD7Tt2gyklnrR48dgbfHXgd9uzHvpamm3wKhcaLcawXWxL5T97dL7MeW3aZ7NDWksVZyZv8VQyjm94CDU7UjtbedqOCvB2DdE+wFC6a5JcEIgkKRJ8cfTGmW/2jMS5LEWWKiGY0BFaDNQ++2+sOifPMQ7CcHeFx+PPpcbzRoy4IKmVwHg/1842BwoGc2qlRVoNjCF59oXsrcBgVEP4u1GIX7jshIMqqPdbGTRJzMXcyyyiNG5fr5qFrUVntrktt4QdJugkr1kzNJCK1roWpTraix9JVMpZcsxGYsJlGiSyEgOFZzHy6YVlilnicmxUVkdX/PetzMBk92PNJNkIaLhmA30XPCrMuncWxOZK9kpLnqpYOOsLFFmaf2Mk8OH+BbwPH7HBX2KGI0Ns80gleH+Y6k0YZcF0sWgpoJA30BBbG59XaKyBHoxFtc2p9sFvyXqo2v2aRKN+1HLPshCibfZESAESYsLXmz3tT4wNMp0Wali+VPN93JIJaQ0AcXGrNMnSS0YASPcaNh32NhO0sWHKPhrNVpCBzyk4EWR/PnmKE+3s2cDO+YF6OddPNx7G4AIrZBPldw6tcss4bqzb6hBy6ccf3YaBSNRBFELueRFp7DXWNMFVAT9J1LNTntEyEI2gJS64oyKMKvSRrbpPQGE0rEEmHyqCl2oQravq51FwJXG0m/pPdRA6Xp3sSLdwGwNytaLg3g3VEE2eFESy/GijQPwmYPjwJT+bH/ax0dNT0NZAFQxyIqKzET00vUDuJ+T25QGCclaGZiJBxsjtz3YMZ0PPsq751h0ldwbZstMgHfnauk/7n1eZxEmYIPf5wPt0KJvg2V9bcYWGgua/Lvn/xG5q98tPLcGzHaac2+Cbs3niyPtGgfYgBT2OHgxvhGxzApoPxPoCOtUNCXX+ojW0ug7DOuyrOOG5GkWhaAzx6ZyGE8qbCPS1oxzPjcWSrG/ICNaNMKsra8bIlQVvmRQ/FY4WiHhnrVz/VfdOiOu6u66gG3NKogJ/0rGdbC+iPN1pbZ4HQAZODS+mC2z9dNBqSzd6mTQWKq+EI3fXgJQdqfqz6jY6Fbs4sWT/QkaLUOBnMhWRmSdrpTy769BcCql1UOmaqtFbDA9d7qEox8Lpa+TPXX+xm40jrB7EBK1lwu6IMud9xh7NBZCbq6PNN/QdTu0BVa2neF+s8b1dGns5tMGxQIP/+fiY60jZNp9n5D9MLm4NLWO2gXVG4xwDXHeHXMFEAITOVUGJRoBUwOV3miiTEPPzLrwDm74zFsW9zkfCASQvPi2RaF9qJ2HHWMJNxCHzDym6tNfXiEe28ZnjmHVGwlSvfgBo4afqcoTh4NNq7QQ1KrPJW+1uHEK1VvTghGa0DAePo8D6D1NCYgEPY239D/RQSUMxWJsAIi5KEp/3/9LH1wSTwl8/mfekwWyIhAwMPErzWxVSL7sFnFT1NqJ+Zb8hX4cqwyucXdUVkaqNeVL7abNtJV++aASn/d+Fw9qlVwplz4SqpVw5CBK7nq483nxbZ8p/8TtFwr8oD5uhq+lxfovd0x4+MHo1Wv14SJzqBo9Un1KCZ8NWfbA7jLeoMjnCcS8bjtKuxii0+0RPZlLS6NdhNKHeN2NSdCswa+K+aGFUTD9MLW9R7mhPT5i88TZvV5rWtuek07W/vBev9eJznPGkM8FrCZ53AB8+Ig7vKms99yRb5fpyoQssijTwz0i22O+HvjsjyGXpqseb4t4j6YW86PfJF2cnjmy8EKVF8sIomGUdVGBquOIDIlHsrgPkJEzw7KovqHB/kS+NPgs9nG9FkG1MJiA0GNwTyj5dRS0uiWTfSLf7jpL0ioLExajL/OJPkUbA6CIdKjpU6XrSY/6mE5Z1IDBoHX7tGx9fFkJZQPrPIW49pj9oUEykkiolzaein8mBh/C/0eAzYoFXHWJxYZWrv/ayPmcWsjfWyDy8ndnmPTldcJ05MaxOoIHWPcND2SOan44Wc1Oxyk59KHbiXwbrxB3qvAEA+Pd3zc3MkDFmxjG3K4ZxjHHfFXKNI691kyRLjmRCUmTQWnQo6XS8JNFBsTkqiRQpijalraTe1VPbpa1394/4PM+naUIl5jb9OQw4tXHsFyAoD/x8vmlYJu23hfowcTnJOXSMUdKum4IqKUd4HJguRiprd/Etw9K/NJ+UKE+T2v39ms2JRGhtNDxShw6kmZEdsr6fwVSzZUCgj/xK8CaD46MMqjtVmEE0DTPS7yo7so402lkAAr5A9TA8YbapYO+4tLHK+uBAqCsdrmkNB/tSNQxgrZRiBjhVSt904TQbBmEDW36UhZEwZN9TbWh1vtrLVYdkQKayJHgjO5aVftyaOhbtIVFjq0gImWcFJbXqPp+aGTaOzHzPptvWbli/tEz5BHs2WdU4y01sOWIdG+CPWbxSDnQ/KbYgddG1ggtPPUFvXeLdNH2EoslAveJl8GUVaLs6WWsoo3G2Q8KnvSkrNV13rJm4fF2jG2NKE3FMgjWPyCyVVZXDxk0WKQyzIcdGvhovfXwvS237WZN3PvX9Dh50V1CMuemc5AkPWBJzzlg8giqz/M3mICBajNsO3PSuByw3zV51gCTybHlfu/R+zXwVekhzN1C0gZCgqc3x8EUR5Mt8LndPRv3AbLnf2ZMLJ2TZBapthY8hSsIET5/vpH1T7/l1IKZl4pTp2eMVFT8J+1JyElnizM32GmBQTaTDJOwuvPCV3QDonD/6xjwgR6SA92MF+v+Xlo/BDyOZJpkM7QFh73uKxzX9hlDol/x5HVESyPM/HNyF6MwCg866UWXm9Jd2xsjrXyEKgjl11K41nEwzFzjyP0V9T87dStAustB/MkOwBaQoOCNG0+6dfSw2YIL2d+aAFbtewoPIATWJC+6il2nDFDx8Vlxg2a22oZG4My48gnrQEcDxOuE71wz51mkfvC3B8gjF04baNRpg6SGoHIAc+zB2Qqqn9yEzCXfpmpdN2kxdkiMQ/W/X7iT/RzkpBGvlGrx2Bs4pl3s8Akl3mRTsubk3x+CQH47r1ZNgECzf7IP0nV8lRUj1XqsW9+wNI0+oAx/lOGVsHcmalqdAqT/Rb+rp3wthEPxjXI6irxhTZc9U20OHSbYAJCX6MKHYW/P8XRlyam7KHfk5VTu8Tmebd889NmQ7hiuPb6bQu8inM/FOXkO7iEWd9hgyBVEErR+8P+Om2lFcXGp8DGe734LHfS2Pk7/pzSwPvdrkd7/NgVo0V8s5ir4NYME0CzGbOVoiygQKh+vexBN5PkUBa1bYInKhFqBi7f3FP9xdy5wmH5ByEL6YmlsN4H+lvQJBG8TSvwBmhcGUafV9uPlIYlkx7S81YuG+rzfC3Eb07PGLSnvKO1ujlkiGMoliWkYJ6XYpHzhP4z5odeImZqKxZT1hFN+arPz5Dw2e00ODXsBCGrf4jB+45ZT7UrN7VBRUYgrUJx0WkxNyMCSxRCIYwgyqxP8Zv9VC+6aiUgB0eIt08YI0fh2ZFRqSilUuRRvmt5jejdoSCjfaRFSca6RXh9kVAjX/OeC8Fbgdo+Ffx9K0zF8p4sLEk27kG2vWNThL82M/h1BScI2Kr8fOKkYdh+WXxAYVPhsD11sx5SDIEyx5CGwE1cQ3osdYdlEP3/AZPwvH8oc1WdqXU/OM6fdPELtY9JRSNHEepmC3ZWgsLZss2H2qwq00xxA81SAexVdwbL1ektQlJeVMZAGObIMXLK5lkb95dhjMzkc/Lq17iiAPa1uAovfIZZLe/kaNzRCUCr39gjN5YW18DwBEKdQkVriaJc5BKEHi5s3DEMukQIe9bStXDHyciJ0Xv84FSgb6OW6WuhFqtyjdjWTw/jt87MnpqzC9LTP5d6vqhMo3Y4u6dwfNAzL++6ah0G8ahltlcWiZPeGtcG104UJ67f4QMwOqq/jMIFw8leQ9VsbOhuOtjYqx9cXIaiBcng3fueAQPIz7hl+NJ2ltWAECQIyl81LAaRwlbECUyuuxtH/i/nb25kFilIsdm9q0qzIVxbO2/dyBPwsOdwI/A1NIhXctIgDDfKCMOLIhEHXE0TYiDRDEMkzWtQ9aBbO3WRIhTdI8MGpPh+xE3SEvZM3TsaSkSwo8aIp7vcBPSpNIUWc9dx2ihGIUfcCMA6h6H0sgzlYo2LzwzsSBG/vPLUKBRAIDClNo2hylJMPNHUF6/FyCi7vsPpUBU5f1Zryco/9dyqeIEYzdzRL4fhRqyDTW1lv0jlQjuBtfaUaKBPI7Hr/G7RcawKWd8xytCCHq0tGrABFlLf+tFnXvcFRUS9SdsaU+DOI67yy47KiS86yVHnkbvbnhw7R5+QMX6efQ0ueOVdVkKZ5o+0GzRYPc72WXnZ220/EEPvQ2mJs9umccvaJ9JQDlWujkWdH+bCuOl6OBriPwtt/6D57aofIHy0JVbraWRZDo7xiUeThF4JL+APjur4ftrBDOoDbMmJGGRvnl0iv71YPgcPgMSa8PT1ZvFkRgx3zPM6BFff0dTJbRNIHNd92hlQTTuYNVd2W6Pu7Myx+NgVOiFPeih7aHHc/Dn2tVtPIQZTLWhr1BSVJzNpZo72uzoDQW1D6KG7aCPz+193FdMxFtZ/hYE8idJqfsq7jHo6USnTep5tp8D4LWtSPqIJS9+U4cc8Ym8lJ94wuv8uj5DlIsflhtItJUoeNhAnkdEmUMIsLbGt6thjaw5suLGIwXg96aII8ttrigpcKpcdmqmOegLraj5h8AAQj+90zF3YhqscELTAFaWZuUAQMThYiUb/FNHAlDUttdbQAyP0iCmwvBlXj3bwwGkEZxh7Y8fY1TB+UUdVfjDXKAaoLYaWGWCmVzzxQxUQK7wSFq7btNyjcmKx2vXgKNSocDI3W0q3gacABoST1YfO0NC0OZ3VJ2PUAwXIcsOj7fJ6GGGw3hkT0GAMOIASUuHGB1NI2BNAAuhQtFj2vT4FWOBwA8AZQCJQw8v+fPYq97G8tFNng/7Ieg+y8KHAcI5wACkQOUMBG9bgUsiYNGzPHqgpWonRw8Fzw7aDForw4oGUkSvQQ4H18ev2sHhEVc+aMCAykFFh8LmGKQVJKhIlOdALmkAKIDBkf5txoCxwKdUAz0ToWOJaUGAeneA3pOjwFyZwApO7V3akpwjkl8oyOFoQqEjYfUC0cBHVCoAzuMMH42EggBKSJqxhsQWwBEu1doBqQKAktnbzMzwTSck8w4yPZwGjYeKiAjDxSHIz0HE3EjHAUOAk5RLXQHqIsOrysqUAHM8BmGZRVNw6Mi1QOeAQRaLLABABIkQAM0yABTbYCxYAC+HWBJ00xdN0r3YZU7ubbjAi0CrjFHxLMzaNEjFLz+4ScStCg4r358a5kbAtifbaHcTY18qVrMIdEEISdanHgWFdkBnM8/SEkTKfoHaS1aNTmZvNwAflsqqgZLAjBXyAMFyrIpbAVGV6oAKrCcPqAr45KYS/sfi9mObGiSlB0D+wALckOOCGOriDK83ywNfxUfTw5tHzwDGiJaJ4SU9holF5fx3X6qZhsRAQeNjT8E/kvHIKvUY1sAUZAea4Onlj9sE68EoEUB458HLCDmAB8MIw6JSiQAN73SPLEOfGU31KMYEYrTousmiyRtBTQ7ClaT3ANP6uFYKL84ahsIP6ssogAAK2ks+AYESgB6V3UYAypGWgKVqngClwwJ4MMim9fqCAHJWh0U5DQ7OVAdSk8dtdOMDCrNkgSBo/c0qyIuBDEFbkh0SUHxE+47GQEo0sga4YD6zesDkgAXwjKzLArVShiyFFWSYXkS3iSlNQsBUb4kAQKUESNv4bFLCMoBtfxJAAAACsmEpW4PjIM0DDK2ZbpZmBCz6FoZBgXsbtnLKab9EAxgAVmSeUimBgihp8IvMSfWAwTyz2AE0IhEJxVzmmrwNT0PncoCGQXQtXwua50xk3uPDI1DfqKHdklTBVYAioGcInu/CGIX1GcrkE1cTAHQHxBAprY2Ib/AxT4WBxZveQAd5CwBQsaMPgkdmgYbVQpqCW6JAP29BmFQDW+aDAMuXCMvfT9WrGXn00cmaaaXZvgDOV/4nwXQKgfTiEmisC6eemBCMrpfiElpnHRef3auBiVEA0qLWeFLEAUBBa5BCblqmQV/CgAZ1UEFS2EgCvpyuAMpGyc9BVooZsCBADmIoACXkboDAEwGNNmnABevAQcGNhceIVFDux3uWIIEPQAsjr5l1g8ClQpMAwJsOVsOFi0Uvq4cDl8PEVl0AAdaC6mFaVQiDNeeA9ECv47hpTZ7Qk1VRRwbdRax8vFXryTiYolAIwprBlZ0pa+KKl5wBU1lQRMCjFIw0l0YdXYDC6i9MgDUC6kp3+A48fLH86hBDQILLQBhZJ5hWwInm3QIHgYZEWvbV70xWqoFLAPERDLK4HM5/cWVKbX8bAMEE7o/Am2aue5ZF6OcLqqvVu8EC6f8aJbYBZOWXW5xKyBANEqjA6AskyIoAf5MBQGnKBpoPTABR+0/oFUHAU1VAKsOqV5NYgBBHwZZh1rUncwDCp7sSWwDQTYKBQdpCzmIrMgNN5QDEbEvW2QFgmmkKFOns0WDQamWLPHDNVGTniIfRQ5HqfKsg8Uue/ER8pZHd+ebUSOm7KgF63WiTIhrWg6oJYgEMYc0LhWELTvncXdcgScC3S+BnrjLYYsZK1PXQ4GJZugCuQAClGncjGcMCJwGMHx8c7mRwoVCQAMJPQO/MQBbcs68Zz2lDQgs/R85PVvPAzRJwGkC7MYIF/UDBRoHd1GhwYuAEoXDO6sFqIIUr3wOHGmZFK1zH11Bh8iGFWc8HgEoQwXvQRxHJDEUBTF/AplEfWUmWSMJpiEUvAcghlFGEQtETwA/BxQAeDBBt1IYKa4cADo6WpUuAAMg0w4DBroB1hgTiAJ/RN9REX0qcIM3Fb7b2AEEm+mOawIEXgFg1ne8ByE6fvMKVpI3IjdsAQETBiWUmjZGDQhjQTF8FgldAgNRNiACM16kCBXhkWoUp+4SP+hEEghL9k9wZjlmc6scT6cUqAASj5U5aTAbAwOEl3ICCG25JR4ffsEKYfUNKIkoY2UMcAkXDqEhrGQ2b2RrqaXjAx81CAUWeXVrAI4mGDm6bXtoAwYVMi4GSk5PUVtclscH8gIhvXQ9UiUA1unQH3gHBwkwq/5SRAaUD0GYbE0QL2MAiQbzlasuGxcYAwE0vhmvfgAe3CW/9BQfAiZ8Tnxx5COM3BRtf6U+K/tpYA+lJQO+LQPteW4WmCHRYyCQALcpWAIX8w0S5CQPI1seMBmCcEAegczCb/8FJpCzbAWD3H5NorMaMENXbcyM+SqnzMa1KAA9KRESUQB+C5mbhqFe5lVYhRtCGAK/a7AxcRIgu2O0PwDuLixjUViaEgz3FA0zqDci2tBRCSARPgRBM/NkGRlZeCFnHlEiyaQrgIgQyl66REcXNJslVzwimlyANCOKfrhClEyKOdFL7hiibMlFBQQg1jaLPAADCPz3BFXbRsbE1+oiTTkKCl8XnvRMQbUbRUgqR+ICSw/lJnACx3kIAhaIfB8W/BnkAGo4MoPAYEEA7RTnB5Sg3RinVnQRBQYS8wR+CaYzXT07BdYMDs8Gu44ABtULIyJHDl9wejIEAGo6jg0VoCpEOI0/YewzCgIzcEmGYDY8+rhtRfEyZQblSwUeDSI/X7sFhPM8FQbc4nCqKe0BtEIkeVqJcscyajxYOUfpyk2ANDYfAOmZD6zJTRSBDpgL/N5wnUqyClKcYB05MI1UBooALCvUhuAcyf9sJiv8GyJRzX/IQQCyC3ZBSzwcO9sXB4AIlRE2vh0HBpcF5grsAQPnqAA7obcALildiZ92TM224bdMmAwPQINWrPd+RCgHJxgDfwMv0YKRlEBHJnpxkJytDXXpANUtIEdWWmUSBAcJCSPkZZ0GEy8MDKof72cdh+oTQjqaLH0McSmDa3cQnJ6lQ0N/+aitLGabIwgrEzCvmmp/o49p5V0GNlRLPRbu2UehI31oa8rgCQhEB6mYuZpU0KMCA2URBW47L4EFCEEgFz8IC8xlQBN3t0iRJY+oxFKsIMEPAMBxbQZ5ChYjF24zfKVBA5UGcHmAAsQ3Zgwn9mMueQ53L9/rahkcB2PJEpl5AIasYhP/UBsSETYp00xgawArAIQDBEgPegICAY7xP353eEuT/Ty9fCWnKMRFNQQACMlLA661MINMsM2jlS7bJr8GyFo0bmasanYGCDqsgIONKQqkAGeBYAkHowDYzhhEM59lCAFQLOH9SCzwQAl9AQZI8AdUPFsoFXJbAAEoFp1vvyL6CQ8nDsdymYQNX0B+FM0EBi+IBmIX5R0i5ed+S0/eRBB2EQBmGBUDWLTLNyEHJKJOPiJaTmkSDpwQNgYCGQqA1LUHqtAwOYMi/of0CMIHTBipAIYEO2MKkkC1BQPDFD4Ax8nmll9bNkZ7bmwv1wIH6qkQQndEHQYPeXxUrLUnE28cVsctUWoZGjYVKWe9VAI7RFHZnmsoBWVmYD4xTWNtGZ9wFawr+wAASdAIf6sAjAbfucWuRAx4jNliQHDSAII30QYUYqZ4xSGTct2+WT1bCnw+AJcbNXKKSE8ZFR+fPATWLFkeHQcVH4CxT9sDtA1cAFADBk8ZBBaRRpJovyFHBAEoMwPaXYvvOh8bfQxDvxShtHKe4KQeeg/AXhcIJKBkjxwgXgB+PCAtPifdTwusJGdXJibqGQzCPyySkBZJpz9En7iGYiCX83wDeQbt1TdkV6IAAGxhL0wERTmBBzESBRUdFRMctnmVblQLazgBAsJXtHhcHCclXRoeywgpDynhVqyFWAZBYTWCEviIXzaHwMxdN05xDT5FAwDkBC0TbBYFo2ssKCNOTQkodAEG0uYMXix5sMvSBZxfQ3Egc5k+AjwvJQOEN9rFpuYXv4oFPCULWRr5AKprOYWuCATtAAlKBrcGkIICAd6cnwxqtl0lfz/5+hUR6q/mHdbFA68Qz8syO8Gibp8LetHFNF8tRAV0bEYORkJhTRQFxAMdPwUJMicmXlQKBmMsZwKoAMA1DGAAEQEnMhcBtQZgNggLxcHiAoCFFYEMAd91E7K+4vHKXBbOfJrOAG1E1YEkqxGsNwUr0w0pR2MitIQ5BlqXAA1atwMCSgBYnTuUtAxxNg0ApC4fgrhL7D5sQQM+pLcGg2RmHwIZNZPGC/cI+3Dbb8WlBSCJ/uO2txmjCBULLyHgqeRjEBLnACxYAkBvBQE2owNsMXy0kzWqADm6Oh7HbSK2kQ53AIoKAFWwN02IAuhiBIQgP30OBTUCcpQr5T2fJjB+bUd/2g5Go9sMv5CrnFlpfAWsi+mamCLtIz5VFsBrbb4AM42rGna4cyoQ2eMO3z8NN8BeNKCKBQp3jFrOL+zqP9WWCQukQGBjmPsTAChybv4zgnVctaQ+ynQlaFQJtTPSxEAsRLwRAK0pStgs2M0EBQtIBmKomNWHKHU1uDIsAg2kEHvlUc5/AgICJ34VcpskFZHSgGFydLhFCo6nCXFfWXgIGgY6R9CKIkFdswK6euK1SRkYAxdXV1Z+9UWpQQOzIqloZy0FIoAZfxX7FAEasEKHC04pAAbnGP4CkFFkEZniWC3xBD13ADNArAFjkW8nICQKAOvmzBI8y+QwMBUgcrY0WJdtSxl0hFiiptgP3hDTlmpdVwDTCwZ0BDrZS0eTQt5GALQLQQJcPsQNOkguZZwCIMTEeadTAyR+ijoz4Qo4VzZZAAAlkSVs6VUcZJepUq0Svzx14BNIbWLpMC7XFJGvfVpoWr+cAI4twmWi2I9wqgwAaiwDPtB9E7z2SlYSA4hvaKQ1nAZ/MnZ2kRZ5P60FIq16lCYDVwVsKAx1BqPRgzsOZvKTPIoBn9kCKTDuDtMFqtp2nRYWNRw6ZBc0MvZ2DYu0CLhiWBeCK9jSZwBQ2CySAafnVwKo3rdJXGWGUQv5gHlWsQQUAFUmWXi4AQNX/oqvEnkEUKG6tlZ9QkzDT1jLpmR9fWCg4wByAi0AWeNCBgYJ12ItvmMCNwrVZkYzcU5GBs8aT0XcqZ04IN6FTgQuL9dZDbIa1W0ER64dUb07oB0eE80fZ8/do84xBFGBcwGbppkJq530TW9GuGMsjLJLNAWrBU0KAKYedUoDH3QB0iGTAE7OOxuOVL8BIAMPUxKLA7HUBjHBHEQvFD87HYE40ZqAAXEF3+EI/FQAACAASURBVAA5VAcYSqwlTR4TFY8AFHwtHQXQhYMABwj490xjbrxCQRY1FA0MBmQdfy8KK5JQK5jIhiNb0AgjOAP7zB0TqcsihQUwRXSdVE4CD0RhWQx6EEYLhhYAeoE3P05iEwbgIiTEHEUiq1SOJcmGFl7Xv0dlavCgAliw5QDiemOUAuaucf5lhTXGhc5AoiqoZFu0WZDr+oQYAoJy3YAB2FsNETiWuCXLoc1tIQasfWYAMgQUTgYARFslHwpiRDUs1hBRoB0bQ7+s0NKTRd1E/RCeHiCeUK9JN5EAdJfznAEq8htHb5ADuUQCf8tY/UgQKaRCDSYrhAiA7UateS9WPksK2cYTfUrVpCTmA0SUrFBkXh0Am/veTf7P7Lb4DU8aKbKXz0zdwW3XchzRimAwkx59hHaKO2GnMbYaFW0YBYkNxWp1SEXiNNCm5g3DNIMgtw+ShZNpOpYq/Q8AswmkIiOEHX99N+JMMAC+JKYI7yrXvJWhZgcNbtz2wQA+bk7APAHTMxnOjSWcrcbzX+OZWahITJEaSlVq6X0QGs2kD7jsDlU8ixd3KQOKAgHdAVMANmNMOIuMjEusSjd7Aw4HHBUmlmJgCkxWYk4Veq5jVQ9CFDiuddoVjHF4dDYARDwtTkEhkSROFdWSdDsWaCj4BExuaA8OTiCxBNJIORyAAoMOTk1iT5wDLiZJBrs7VV4uAKKQCxESEKAfymPGhzOP0pVhBGA8ol5iCxpyOoZZFCJJRRXFTm8sA7PfEnuAEgFx0kBskwNQZhyzMLaesB4SdgBuQAKmhMetRhYAICQAP7EL9S9J8rk7xDAYgIxMIlDWBG0DAW8BYAdGkayHGwwrAi4b/r5sA0rCezgdXjtnijaFR5eSBAz/aVQ+mggCDxmYem6hDQtN369pqjuUEgAYD0BSUCT2CaA0BkkSSiDM6jOEQDOFjTDiIQAVX1TPI7bMwK6hF1sFT16bBoFTnVAAFcgndTYODzc/52xpHRZyNxDDkQBPhGMNhklGAbYDJLs3NFGGnC8lCpbuAl06ZWbRM0QQJgfnBAVVCyqR6L9SLIHQDAVNGpYiAIc1AJk8AIAA0TfDOzNArLrhf7hEtVMnMAEBCT81VCmAL7wJ+AKFpQS0Xx0tbQDcQgEJZzcdBW4AOQB2yAAFEeGWwhWAatIHABBbsCfCPlQAikYBjxdYEHgjNAUNL8OWdGkAXgMfOQDJ05gDZyTItT4pIibKF7+xXSp4Shfkxy9Vylsra8P4h50uKHAGw0KZJbkH2GZs1xvMPI3ddzg1sNxcsWHdA6IsCN0GeRJtVDCuDUWwaQAlQj0Ad2Ca6wMJA8+cfEoKOwP0EoXGHg6EdQUZaed7cUveOVMeswMfGy++GDwFsSsb6S9ehSIqVZF71JbZh6LBFLIRDiAACUrQGh3yN1sIIYIkUOeTKl1MTeQYCiMBFATQgh+ynTsCSAOav9AxNUF/AClE0gY7BIsUJiVNABBFJRT2FwgAslkF4mtM9lMDI6AGHrsDBEMhcPQBAnwmdg8o7YkIzxJYkJ77A35vQ2M8AOfeGivv6N1CumQj+RUGPQOXLeEAqgIp1Ig6o3nGdRl8PTUJyQFDEAJ/KNdr3gkIBywcNHDoiAfNW0CHClyw+AbbsU+ruOwbBAncmpU0WePmFgtJd4UAHD+zLgBSQQAugirUKWA8ERwyAjfDPLchDh3EdJRQgbHANWS4bDX2QWzJ2mJZh18YFTBxVgJsBe9gFSoE7VZXKLlzBo5G6q7l1hLxmQMMA6MLWH9PJUb3QgGZC4SBAx0BINreFj822QBjNwMgk00EK/kAtPUvcwxhc8cPRQBSsLgAbRwSGiMBLa5gDN0OekNWCnc1aV9sqeReuiznCC+PLMjJAh4xhq9iAwgOI3IvvyBg2TibaC5IlpM0Lkp8BdcGL9/LB3D9u3oJVwBZDSkkPQIITsjVS5NtqzukBoSUItLaLUeGQlRph9bxmRwAOCK8upGsTd/aP9AhFkwjBnErDQYAAT28k+5LG8IaPTLcvCciEHIbDW8PS3F7ZABuCV2xjgQ+9MHk5jktIvwbTCddCpWOGVBD4QIOfa+MURkdX70FKoRNAA08ttApUKfTq7tHm6YZAJYNRtEWHxgn4AKWIzQrKipAgSK8tk9aOQpky24DUkQGZnVQoRUBP0NDRI/UwgIAMfAoEBSLZDEgLRO1Br6SV38EF7rXIx/JAQ8E3EALBQcSgN0AFFDXMM+Lcw4EFpWDb2knRW/mRYYdfAUdfQLwWhkUCJQyms1ksgTMpHhbAHil+gEBS7anHDTwiRpCrmULHlgkaWl2VL1GDsrg1apysgeLQcKytiGpZUOcDMqz7zAAQwIiuAc+MjjuBK+JmoanK95NcXD4JyZd2Nh5dmU8IRLLDQdeCTYLvtBn6g+P6dw9JTYeVpoGi4ogu1N/K1HYkQC/YBpZAtrEZABeIfY1qIPPzFLFqQ4DDANRwxLNOQFjDca2WfiWsYh/pDePNz8H8AwduiJsSFkTWQRoen8WGw4Ahh81nyQBP5AGhR0E26ZwQ6DHcrwHTrJhA8yogTgLH9PiAFsgFGUJZgB2SLsyWzN9ASa5CB0yXwEJCam2WKEPNT54YlMBn+0OZwAdDwgEA9SnqxNDFoEDQT0NGaOFEHRADFm8F23JWUQQGhMCArWvLhNCfHChBBcNC6QNK40boQEAO+lRHA2CUxLhZyStpJ7pkDc/Cj5S9VMYHgC1PkR/KyVZmwEdKqJACDEcjSYbdxq+AKHVJUhxUMLPdHUdbAACCP33H9UAA8AELkYySGs1NZFvoAsnLu86CBTGMDtrpS3xOIHVHOVVSwUjxA3XFS3diDMPLbOzB9k7Wc9QwVJ5rhsB6E8S1AAGLXom2BIGMhblrl1bFXIYjQSmRiUtBVEKRbNsx4GKS0NiJC+HPpi9LQ76mjyf6OVwqBcGUmYEXgMTd2A6HWqzv7eGEQxBjkcBU/NVLCeshKpDLHJlq2tKGXeSSwFCJS0yAwEd0QEQYULiWW5o1uMgCv2UbVQVInoFKCv7FzYEEgB+31t4HjUs6mheCcGtRwxkMsMlBBHf1b0ADh8dZLtXOJM2kDUSjgxbWZmpAjISVgRbC4sCJugEjdR31gAp7hMAnkgTM5YXSQOZPGsHOAKwefkwknwPEBMqfn0NhJUI15ICbM0TWmmseAWuYeBQiaoWCRAA1AKbxAo92wPXEUQw7wDfnSIrnG4CGV3YXaBnPavwW4OXApQBfZxDwQ1iC6MENCEJAOKZqDFUARg48iFDTDLhNwWjqH4WHAE7PALJFQV7EwMBmYl4Mx4WDqsCAVgA3AQC/Ncp2LMA2aotBnxeNApPDKe9EVSiGS9JMEtKwJUIlwMUDac5oIEPRnapEikLMwAhzQUgJ3QiA/CiOgqWe23hYA0ZAglKDSQZOAEOC72KBJoavjfOPF3IWRciaEYtEzhLKwC2bklkNZgpRwI6WBtPAw+npsDsD6wU0TJ18JCbBy4aNIHPCstFAhRbFzkDOiYSlyULWoWJuUmHMaMPQhe5B3kbXkVL5bZfW0cOMzb+WAAAkGLfDwBkZAAVpGI4umrpsOchSIGKAzcBIjSXoBNokAlDLAFxFpsCbPTQTw5xswgtiyR9QVUGBDzWTAaVDqEAbCsATiO9za1IUezkU2NfcW/LHFaJ0Z8ACSpJVAV9AnL57hOjBs+jBFaPVyvne8dqLUfbF8GOEKVCDVsBLgxdJgBoClkAqUMmZS9cZrUUCgko/DTSHhYGPC75Dm1CIhnzGV44TgJ57DncEMTOEBWMAIEzFCASqi8BMQDtz2WwAChwVFEFYF5qEVJU837Uyx7fUGxE1YBGgu1N0nEsGiYBARCJGiv7nw4CCctmfyoGrnruhwzdwJUyHQMCWypq8T6caAAE20uVHZAlymbvOgSEAwDthEIcfAVjEQBvBRkXkhxrAm2ikI8RNt45FNuOoFokRRdegaaQOtexKJK1HiUAJWEDJgZz22IINjqFaReWG/QEzfsCRBPGyDdYRgcCrzIksE9ZRSXiAdKtH2VYAuzuqgMa3rADi5QGUH9vDzLeOQIEWwAJV4ubXVPDh5EkEzIVBjBkdMcxmAdVxQcDjxzkZr7HeTUzAQ3p9AaLaZGNHWb007EKkvOzc+9NfzgpIllL5myLFbQLygM4XgYF1J2Tvk0uFwIOEtlkSmFFA/yLJ80NAoMAXcbeHgxwl1jcouxbixCh2lPHTFx3qtaG2fp20wrwOgAL5yMrCgRJvQQtg38vXwf6doIW284PZBpHpsBJPzedw5AHCAEMS7YabRQzbkW6L7ndADPqNCkhAZiLdAMYfiZIPOYjGAwGD9Y6vGuiItqzLShPPJ6nT1V7ZoqepyOwL/dvFVxifBwAiHaMARYTQUxgAgACKxRvBh4kjk4AAwUq3gAAEeZC8yAMw5i22C0+GDtgBDwBXg98AwkROUA8S8YCBF903leViZjUa90cdTEOBrwDXHw1Bg8SIAD9EsSgIQwFDEcasGfBcl/3AGhtMD6YjLVaO7gLSl0BA32wU8o5AecqKYOtbh4BdQNIjo0geknWgXWS7wGzHxZ0A3NqHQEBcwCtNqlyt+c0AOkASngGAApBSYNSsGARwxoqz0NA/ggLh2AmkXEAlkauySUDu3QbBNpQUzkdYm+uYokbAjUmTZkCjHh5Zg4uAQ1OY2Z3mUl9vCwNoKYnFjSlbmiP4RmPUKK7eZ0DPgnn0ZqDmJDuA98yAQ+aL1PCSm9NBjcyE3BMmwCmEOyvBOilD8z03gZJS04dEK5yxwBKUnLULgA795xy0+1MXWEPe0MSTWdOSllnH4JfHofxViJmgMVAnbIMYSY+wAUMGScQ1g8AYqARnwEBAwBI5pMFeFOj84MHBNMeuweIjvkDExPKh9omslGCSVgAiN7YEB44Qpp2LiBjPdarEADOBIQdaOdMeA1XMJ8TpvwQ2tGMe61kiAcdEAoCrtBNJ2/Rhs5WfILCBiM/lIG64B5EVH5MfuQS8x03Za2ACu7cEw7NMQ8fIgA9EhYzJYmjV4svwhdqDI+guRTTWvBAXB1UdpDG1QI4DIY3NMjq48cHAg/PbAeQEFlY8rE5ClIACwBx5RxSJp0jQxFhGENVSjUQBQw2iMOKTHxkGjWS9SnbArELcrY0rwyMZT8ShykQV+FwUJMuUgaIWSeyRBZdbRACRCCiiSAml2AEGGImDUh7HGwsHG5KaxaGKsADQ18qC6KJsaYtDUsAATMPnDFfNa8EAH09YH2HsN5GykhFWAxNkwAGCSh0Vh/nMSOlhmUY7RVMBADQmDc6QPpXOVQoBbAMOyECuunUyxPgsQ0ETnBwRXQBAD4Z9IYX3tRMpbUBBbEOtydiCAIYue+9ssJjHgR/2AeVIIGbAmlLYUymQyRwZQTXBlCWmgNl48hVM7QSIL0CdJNSu2lFnk8fiZUZPRFODQCEH0ExjxJKSHJHTWlhSvJmIZZqczI+ADBfRQ6D4Q78UtkAAwsBw2I4MWsZlxhDLwD/BwD4WAUGCne4shiGGyeronSUAQXP5UkAOZ+BfwIRRANQS2eyNSEDcP67cPQAAA5dPwTl5Eg5FHSFGiQZF6BZBxttv2GoyEQFB0xSNBUW/EssG1aRABX0L0oXTk9w9P/nm+ZVMmhBQhcIGxhYOHHoHwNzJldxFQB0KHapYgBDkY+WKIQBBS3cJQYOvmYAR0qKAE8GApuhVQDTKawrE0mPBQG0gt28GoU0YHBDwfqHHhjbkDpoSWVWA6kEs0e1jAIvmkyegpM6G1IBXUzELwUOM2kAISwmADRsQ0MwYxeYL/A6RQABzliwKBgSK4MIxgogDTzGA86dDMa+XUMCLkazOuVDGApvbCfg4CQac2iJU8SvkQMoMrD+PQICV+oinEEdBm0iJT4MyAhTZgFYEnkWnG9xn0y74ilvXe25Jbli4UIJQAJDDjXiA4QDDSiVdiMi/rXIbh7VAPAPxA4UU/bFj9kDQwQKkZtHAlmRGwAt1n4c5uKmg4kORgd5WBq/V17bNiFuAu4AXIauVmwyb1tJ3gLMkljMvYJpCGEM79RBkhofAX06o1gaLwLwTDaMDQEFuzw6UlE9ASVc4VhyijlwMBC8q5TXBwY+MsgHe0VJoAJjlgAUvh8zAAcyNgUYl0e7u2JdGR5GbEOPBQRZBIQBZnrZAvJGzYKVQg8nTwskXgRp1hvgBRwEizz0V35fMqtosBADNwJ5EsGJBAriES8rADV+1ohgBwcBL3YBFAiISgIAAaiaHtpdDgh2Oj1Dg8G1gzdxdGkYQwW7CQCTNDW1GGtT5qJptqfhAAM2bhqP/YwZCWvDU8wVZmt9qQ2yMo6+KHLZ/dslAgWy5BanAIcBnb5hcjI7WBZ6AqTuASP9LHZRiHh0WQ1dJzgqMXGNqSWF7duSohXEqt3EAck4ZwUVVX45ChZEIBYeFnpOC5wPIwA/Gt0cIcKsoqTJPZ1UTRMBWA9OMqWcK8/YAIvfnzBhEwXifwgthgYgEecXBAsQZSVfVQ0ER3w4TgE8iE6ZEIwoFTYzUwGwt2El03Wp4Q2IALsOJnVYBGZdKCUBwQAqAFqlQEZJRbtrwqcgXlIIUx2NcEShuvIBbgq0XVCNBAKhUT4JQB/OBgqIf3FzY6V7OyKAOAoBASg2GU9GAA4AfSMKojG0m5gyqAe3MXWTUgDAAgxFtBcbx3gCmAYBRCEIaWdBmXYDgQdPhQMSeVkjt+IFTuC6Ij8N8+cIOhMxFvN0DJU7rf6eCTpJ9QNR1LoQQQMgEY26fApxVC5HOGr9sKU9GORpdSRjAW4rUEs3GgRFo9IJvYmKIxn3EuAwADMMjc+dCqyePSGpQbkhEXoVHwb9SJ5eMR3zbXZ4JW2BqZVw2l7pIXRrAhSAEAVRS84yK4rNO2l2wNVcCFW7FQwbADpohDhH+ALV5AgD4rQpGReMQ9tkmLIzbxPPHStlIdXCbS1hCEj4yktcH8cO9QspuSFFc2sfFMjhw8WBfwH4AL00SwUDOthSQB54xEsG0i0ACE7WuddaHtLJZxcCSUEYrDRF7xRceFE3AC2x0k8HnShj+8mn1AICDQvHh7yrNLLpdSMBOF7XG0MIKTpg3XePZSgxj4EUDQW6ERczAmkHACMqRzp7jwLBHE1J+9rgGE0jMKR9eAC3iUeONakBJAvMALJ5jyVnHDpo4HcqIQQqJDKFNBhoGQpAAb6m34tpMCwA0p2et1pv9wIkr2yOkSgpxQLKc1IqDDsWJgQWiFnICOdG5B2pQ1FQEqBk2k0FSQ8oLkFGe38tCE61lDAABt0AMaACES7m5uDMWkOQJp0/Hg41dp5mhRNyv+xrYjkRExpXAACXB7ToUYIOVBcRGpltVbe8OYgfXFsByY4hGhkpkyoB7hcF6K0uvEqfZ3griUwBA1c/lD66CQFPcuK8UwRxQHrjeyZEa4w1vRQqYTgxzxgQEhpdGRUUHRNnf4vqR4ObYGCWlrtDMwhWI0ZhExohPDYcfbYDowruYrcukRU+j0IGABZOTatOWA6DbwRHWnODFRc4PImVa24k7ATGb0kbQpcSsL4YFbkgARWhBHl6vFpBPRSyVmOdTmIXefPQCLgLUWUpNV+MAwdW3p10p0eu5BxC504BVIXy9c4JWFeJA2BjBxPZAnIBVQAZhQU1ADH4DjnMGeNHLOhzGY0L6yQtbYoXAJyb6u1PF7UZ5yAt4JwGYldYBd0VembYLQBnVTpvhSA/ckID5KwqDCHKBp0YAiR0oOcfXFD5GQY+oUJH5JqHAR8UBB9QqIcTPwQDE/cukJsaOVIbAuUBaxEVKvd3i2+Q8BAfV8nGOwKY/DtMAgkLMOnoHpCTARcGXgIUhPyYDnVrAExDQSJ1gGIMGgtYAytm5mAuUxtoB58TXTtv6wUAa0NdRSmbkMUEc15QPzEmWRQCSiw5cA1VoRQfWtxc+T0F03kr1T9b7QirrbwAXiw9TpIQLwMRz1BPIlLVz2C9KLQez0US9jMGnUkwCDWWKKWkjQlmXDZjQFxL7nsoey5VQwonAARTHV+7T2o2FlIjAghKc4pLVFWlP5YBH+iWBrccMUpWvxfLgF2Uc3GlpxBgKSA1C26DD6lECOuPBZ1vBhzxaoJkOfOGBXEfH4SpqLmcqQgHLqpA2FJvoLGFBTTtEVwPgIAWD5czgF1YKwbKK0omhid9pnsG3sdBFgMCnWEwrAt/AAxsDcl3PWYuBXYZt/VAEHZFRyu9ERMlZA7aGdcCBgAJCPb3D2AtAxKrHCcRQEh3PMxxSgZzhpKkABTYngRSabRPLwAEwOdIZ7q4CXUDSQBW4y0NAs3GAJEzApI+A3ch8L5wJxDHl31utHwtomsfuOkYFHczQFQ9YpEkspI90XQaQREGQDYArfYUTT1n+WnEVRlkMK0YFEehewNFXB9Qf7NnPPRJozTB8ggFWhokACEeqsVTFD4NFOtfQSlGkYutE1BndA5zBjM1zCAsKWfDYBYCKsZanqqU8mgF3ANrEAI/HOsHDjgi8oycUYmlahbDEym+E2RZoJ7CuZQvFIZ+Jo+CNsk+dvgAXSsCovgCRS0tyH+aFYaA2V8ApQLIFAW2ZfgiAlIEuwIO4Ap2I1xnL9wAdig3UgIGf6YE6DbBBHsBdxUYPHjSAHNWkIRV4yToTJo9fHKeIa32X0luKS0KMxP3Ko1eRBJCWkIMxCT0QmGFVau4JCE8fyjMBrtGXRFQD0ey3ylvRggAFQMds0jrARM9SsnGPBPwES6Nxm00yQBywllTABaqCdwPMUoO5Qd85Skqddq+OgvwnB0cAXVO92EWHA4IdbRkNjHKtgz1P9igRVKWJTcjwZrR8wLfBG0HCOFOoHq8bxdTQkAxKg8nE1DGHtA3kQgro0sY9PUYwjnZqgN5FQeHiEMAFRkElNIELGVYpCzs7psuagceOx6VnFMNPy/MDQe9BwEqPVUNBAhc0tpXAFewAxZ+AKsGSriss+52JIsIOj6JVHuNtiQnblFpaV8ED8LHvw4EmBgHL1UP5gNrBQ0SQdz+AxUBqnMDNuBtmgbCMweoGxIq9AbOQIyvOd0DVEUOXzQAcJCuFF52j5Jz5aHRQ5YwMny8QQJcFYgAF1sGkRMQBTDDzDdfK4SKytaorCm44gSOswA1lc1IVWqFuh+6x3LnBSUAE2QIWigFHb3YC1BVDwWdb4eIFzrNRimjqSKpwzltIIWEdI49Mh06XQYKBw41oWjUAHwgEoKXEKItKQEDAAsANWhxAN8K2QR2g1UjAts3mDkh2jA/LHK7BM5OEQ6oBqLLHj0aA3U3MX2Kb1wEBNIHNul/ogAnOGEERQWVVxvZA01dshtiBA9sUJqjJEs0APzrxA5TLhld+ImbOIIBSAJ5CsWQ9nwDE4EAmwYAFsoF28p6D1uFMYMFfgYtE6qkNwAATiwqvE9QADoAAQBqF4wG3QAumBeeN0klpFMCJGmFA9QrBAiYUiAsAFvNnm/HCXOBHKIZXyFlQikDC34xeT4IqQES+kh8NAMYAUEAvgB0HiVoCiMIbI4DGSYNQndiOymW01MRHDwWzs/FkmNBosBbZlMJj0LSAQJUiguvPQAHSxcATgAEbkceKlAmA966PQGGvYaul2NcZG64cOS55stIjxIVAZyuYlwBAVoJLrV6cSQeOwLpDQQb3gMFBUOMOKCAHgTAJd/0fsZGRCZz9eoBhQZ9Lx+BmQgjUNWgNZEbkzIzJz7Kn22XMHV5p49UihqXk6EAeqS6kDqzQcAcjElhAwsAIw4bkjXuBXHmkwJFAT8NLgCQSA9fAmoWAII8yBinKIFM5qNFDVITCBY3q1P2BKNnIPIJoA1wSGtOVkMVL0wuW3qGmRItFEJdIwMNRwI4VlZyFA5ntqYu3bk8FuzvX73m+0e8MiSObrkfXIS3PqwgW30csgKb+sNWNAqkAUAHHBcAHisPF8KyNVwdjib4CQEEqB8BBk3RmxoOcAYqEdnBQnikHk+GCzazSTmuSQXIjV1IPVWWBJEz61wSEA0AQA89r+DVIWexHfEtWzwaxWhXkAxh4jFolqsEVsMROEk9ijfAAR5jTmj6exsBtYRyIiMoZ/4tVhPlPMTKWBfLMQIxUwEAmQxJGCMFSwPjJwj2GUxYFhcWg5u0ntEASB9dCwNnhlcp7wADVo2t9ZEqG8wJWw3bW4IBpoWxDiGWcPxTjgYaN78JGGW0oA4BFsFpqTAKAAQ80REueg8DlcPFnx1jXTAK5NnxwgEb60cNmUb1gDo4IDUGyQgCAW8uBE8AClg+kQEACiJyVT5uW8RBG87AFApFlOwHAicmhoIYJ5YKAQzVZCfCeuuSnEUSeZckEiordDgJUX3LlPazKnfNjiIeqMxVZAZZADTEEkZ8EXGL+gFGwrjaTHyCEb//H6AY7NQKJgsWLAEZPFuLZnZGRnQtp1EuJRVuJTGdca2pHwCthB51+ZgAuXp+lRMyJ2SAgrYB6m0Q+/4YDM6aKGi/fSuVCQVuWtMBKztbqWEoa85PVdo7zihmsFxiXjnaYQAUn5bbKOh6s08RBhjdaU82QD8htgUalV8OGmIHAFTgUJyiMgTgxg8fON4ZAaBIgnxJeaqd1gRvBBMITAdGJWRKWx0lAVHR0j4AdvYAdQNaQJUDRHlHml5cSLMjaYxAqHmbAaTZAZcZ5s6JLJGip7sCXaw2LCRnK1YMO4sFRAgVWgfXMfc+zt038JeI6lkCDQU5yCGeZRBOA9aMG3e0AZ7cmQmKjgeCWvmJnn7yAwY8uoEEL1wLBADizps1VFIzm5UYtBHFT5Qy46UAsQTBZCwPgljNPekNGEwdic0FR1JmP5AAhShTl4MCWwq2By1NKlUqzQQGAidkywDoSgYGtQ8JRdefJLqPjw5YsD85GiBWlRsDZ2GzVDkCvRSyUzIq16YUXEBLd2kGn+rLIwAAAK1JREFUf54DD3C0WwmGPi9OSjpCA0A7fFwUZTm0ktDZLl5VXmbFDDQACl7+QSry5QCM2bfNC+WAFj1LAzLsiwEBaQCW/1EGcMN/tG8OViQtylulBUxRADYm5SEBRAcAARkeMC5iRNgZhOoxnz4oHApa6gD3ASdbmF188wxpDZVKUL4RUhTSSRvrQAZLDcgauImabgJzkXIaALePAXot1j6Bdwe3AXoQAnXMFVuCApGWbjuRvTu7AAAAAElFTkSuQmCC';
packages/shaders/src/index.ts
/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */
export { ShaderMount, isPaperShaderElement } from './shader-mount.js';
export type {
PaperShaderElement,
ShaderMotionParams,
ShaderMountUniforms,
ShaderPreset,
ImageShaderPreset,
} from './shader-mount.js';
/** Shader sizing options and uniforms */
export {
defaultObjectSizing,
defaultPatternSizing,
ShaderFitOptions,
type ShaderFit,
type ShaderSizingParams,
type ShaderSizingUniforms,
} from './shader-sizing.js';
/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */
export {
meshGradientFragmentShader,
meshGradientMeta,
type MeshGradientParams,
type MeshGradientUniforms,
} from './shaders/mesh-gradient.js';
/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */
export {
smokeRingMeta,
smokeRingFragmentShader,
type SmokeRingParams,
type SmokeRingUniforms,
} from './shaders/smoke-ring.js';
/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */
export { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';
/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */
export {
dotOrbitMeta,
dotOrbitFragmentShader,
type DotOrbitParams,
type DotOrbitUniforms,
} from './shaders/dot-orbit.js';
/** Static grid pattern made of circles, diamonds, squares or triangles */
export {
dotGridFragmentShader,
DotGridShapes,
type DotGridShape,
type DotGridParams,
type DotGridUniforms,
} from './shaders/dot-grid.js';
/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */
export {
simplexNoiseMeta,
simplexNoiseFragmentShader,
type SimplexNoiseParams,
type SimplexNoiseUniforms,
} from './shaders/simplex-noise.js';
/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */
export {
metaballsMeta,
metaballsFragmentShader,
type MetaballsParams,
type MetaballsUniforms,
} from './shaders/metaballs.js';
/** Animated 3D Perlin noise with exposed controls */
export { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';
/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */
export { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';
/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */
export { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';
/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */
export {
warpMeta,
warpFragmentShader,
WarpPatterns,
type WarpParams,
type WarpUniforms,
type WarpPattern,
} from './shaders/warp.js';
/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */
export { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';
/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */
export { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';
/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */
export { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';
/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */
export {
ditheringFragmentShader,
DitheringShapes,
DitheringTypes,
type DitheringParams,
type DitheringUniforms,
type DitheringShape,
type DitheringType,
} from './shaders/dithering.js';
/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */
export {
grainGradientFragmentShader,
grainGradientMeta,
GrainGradientShapes,
type GrainGradientParams,
type GrainGradientUniforms,
type GrainGradientShape,
} from './shaders/grain-gradient.js';
/** Luminous trails of color merging into a glowing gradient frame */
export {
pulsingBorderMeta,
pulsingBorderFragmentShader,
PulsingBorderAspectRatios,
type PulsingBorderParams,
type PulsingBorderUniforms,
type PulsingBorderAspectRatio,
} from './shaders/pulsing-border.js';
/** Glowing translucent 3D panels rotating around a central axis */
export {
colorPanelsFragmentShader,
colorPanelsMeta,
type ColorPanelsParams,
type ColorPanelsUniforms,
} from './shaders/color-panels.js';
/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */
export {
staticMeshGradientFragmentShader,
staticMeshGradientMeta,
type StaticMeshGradientParams,
type StaticMeshGradientUniforms,
} from './shaders/static-mesh-gradient.js';
/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */
export {
staticRadialGradientFragmentShader,
staticRadialGradientMeta,
type StaticRadialGradientParams,
type StaticRadialGradientUniforms,
} from './shaders/static-radial-gradient.js';
/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */
export {
paperTextureFragmentShader,
paperTextureMeta,
type PaperTextureParams,
type PaperTextureUniforms,
} from './shaders/paper-texture.js';
/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */
export { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';
/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */
export {
flutedGlassFragmentShader,
GlassDistortionShapes,
GlassGridShapes,
type GlassDistortionShape,
type GlassGridShape,
type FlutedGlassParams,
type FlutedGlassUniforms,
} from './shaders/fluted-glass.js';
/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */
export {
imageDitheringFragmentShader,
type ImageDitheringParams,
type ImageDitheringUniforms,
} from './shaders/image-dithering.js';
/** Lens Distortion image filter that separates an image into shifting color layers, recreating the chromatic aberration of a lens, and warps the image geometry with barrel or pincushion curvature */
export {
lensDistortionFragmentShader,
lensDistortionMeta,
type LensDistortionParams,
type LensDistortionUniforms,
} from './shaders/lens-distortion.js';
/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */
export {
heatmapMeta,
heatmapFragmentShader,
toProcessedHeatmap,
type HeatmapParams,
type HeatmapUniforms,
} from './shaders/heatmap.js';
/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */
export {
liquidMetalFragmentShader,
LiquidMetalShapes,
toProcessedLiquidMetal,
type LiquidMetalShape,
type LiquidMetalParams,
type LiquidMetalUniforms,
} from './shaders/liquid-metal.js';
/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */
export {
HalftoneDotsTypes,
HalftoneDotsGrids,
halftoneDotsFragmentShader,
type HalftoneDotsParams,
type HalftoneDotsUniforms,
type HalftoneDotsType,
type HalftoneDotsGrid,
} from './shaders/halftone-dots.js';
/** A halftone CMYK classic algo */
export {
HalftoneCmykTypes,
halftoneCmykFragmentShader,
type HalftoneCmykParams,
type HalftoneCmykUniforms,
type HalftoneCmykType,
} from './shaders/halftone-cmyk.js';
/** Animated color fields running around a glassy logo shape */
export {
gemSmokeMeta,
gemSmokeFragmentShader,
toProcessedGemSmoke,
GemSmokeShapes,
type GemSmokeShape,
type GemSmokeParams,
type GemSmokeUniforms,
} from './shaders/gem-smoke.js';
// ----- Utils ----- //
export { getShaderColorFromString } from './get-shader-color-from-string.js';
export { getShaderNoiseTexture } from './get-shader-noise-texture.js';
export { emptyPixel } from './empty-pixel.js';
packages/shaders/src/shader-mount.ts
import { vertexShaderSource } from './vertex-shader.js';
const DEFAULT_MAX_PIXEL_COUNT: number = 1920 * 1080 * 4;
export class ShaderMount {
public parentElement: PaperShaderElement;
public canvasElement: HTMLCanvasElement;
private gl: WebGL2RenderingContext;
private program: WebGLProgram | null = null;
private uniformLocations: Record<string, WebGLUniformLocation | null> = {};
/** The fragment shader that we are using */
private fragmentShader: string;
/** Stores the RAF for the render loop */
private rafId: number | null = null;
/** Time of the last rendered frame */
private lastRenderTime = 0;
/** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
private currentFrame = 0;
/** The speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */
private speed = 0;
/** Actual speed used that accounts for visibility: we pause the shader if the tab is hidden or the element out of the viewport */
private currentSpeed = 0;
/** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
private providedUniforms: ShaderMountUniforms;
/** Names of the uniforms that should have mipmaps generated for them */
private mipmaps: string[] = [];
/** Just a sanity check to make sure frames don't run after we're disposed */
private hasBeenDisposed = false;
/** If the resolution of the canvas has changed since the last render */
private resolutionChanged = true;
/** Store textures that are provided by the user */
private textures: Map<string, WebGLTexture> = new Map();
private minPixelRatio;
private maxPixelCount;
private isSafari = isSafari();
private uniformCache: Record<string, unknown> = {};
private textureUnitMap: Map<string, number> = new Map();
private ownerDocument: Document;
constructor(
/** The div you'd like to mount the shader to. The shader will match its size. */
parentElement: HTMLElement,
fragmentShader: string,
uniforms: ShaderMountUniforms,
webGlContextAttributes?: WebGLContextAttributes,
/** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */
speed = 0,
/** Pass a frame to offset the starting u_time value and give deterministic results*/
frame = 0,
/**
* The minimum pixel ratio to render at, defaults to 2.
* May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.
*/
minPixelRatio = 2,
/**
* The maximum amount of physical device pixels to render for the shader,
* by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.
* Actual DOM size of the canvas can be larger, it will just lose quality after this.
*
* May be reduced to improve performance or increased to improve quality on high-resolution screens.
*/
maxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT,
/** Names of the uniforms that should have mipmaps generated for them */
mipmaps: string[] = []
) {
// nodeType check instead of `instanceof` to work across document boundaries (iframes, PiP windows)
if (parentElement?.nodeType === 1) {
this.parentElement = parentElement as PaperShaderElement;
} else {
throw new Error('Paper Shaders: parent element must be an HTMLElement');
}
this.ownerDocument = parentElement.ownerDocument;
if (!this.ownerDocument.querySelector('style[data-paper-shader]')) {
const styleElement = this.ownerDocument.createElement('style');
styleElement.innerHTML = defaultStyle;
styleElement.setAttribute('data-paper-shader', '');
this.ownerDocument.head.prepend(styleElement);
}
// Create the canvas element and mount it into the provided element
const canvasElement = this.ownerDocument.createElement('canvas');
this.canvasElement = canvasElement;
this.parentElement.prepend(canvasElement);
this.fragmentShader = fragmentShader;
this.providedUniforms = uniforms;
this.mipmaps = mipmaps;
// Base our starting animation time on the provided frame value
this.currentFrame = frame;
this.minPixelRatio = minPixelRatio;
this.maxPixelCount = maxPixelCount;
const gl = canvasElement.getContext('webgl2', webGlContextAttributes);
if (!gl) {
throw new Error('Paper Shaders: WebGL is not supported in this browser');
}
this.gl = gl;
this.initProgram();
this.setupPositionAttribute();
// Grab the locations of the uniforms in the fragment shader
this.setupUniforms();
// Put the user provided values into the uniforms
this.setUniformValues(this.providedUniforms);
// Set up the resize observer to handle window resizing and set u_resolution
this.setupResizeObserver();
// Set up the visual viewport change listener to handle zoom changes (pinch zoom and classic browser zoom)
visualViewport?.addEventListener('resize', this.handleVisualViewportChange);
// Set up the intersection observer to pause animation when the element is scrolled out of view
this.setupIntersectionObserver();
// Set the animation speed after everything is ready to go
this.setSpeed(speed);
// Mark parent element as paper shader mount
this.parentElement.setAttribute('data-paper-shader', '');
// Add the shaderMount instance to the div mount element to make it easily accessible
this.parentElement.paperShaderMount = this;
// Listen for document visibility changes to pause the shader when the tab is hidden
this.ownerDocument.addEventListener('visibilitychange', this.handleDocumentVisibilityChange);
}
private initProgram = () => {
const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);
if (!program) return;
this.program = program;
};
private setupPositionAttribute = () => {
const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');
const positionBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);
this.gl.enableVertexAttribArray(positionAttributeLocation);
this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);
};
private setupUniforms = () => {
// Create a map to store all uniform locations
const uniformLocations: Record<string, WebGLUniformLocation | null> = {
u_time: this.gl.getUniformLocation(this.program!, 'u_time'),
u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),
u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),
};
// Add locations for all provided uniforms
Object.entries(this.providedUniforms).forEach(([key, value]) => {
uniformLocations[key] = this.gl.getUniformLocation(this.program!, key);
// For texture uniforms, also look for the aspect ratio uniform
if (value instanceof HTMLImageElement) {
const aspectRatioUniformName = `${key}AspectRatio`;
uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program!, aspectRatioUniformName);
}
});
this.uniformLocations = uniformLocations;
};
/**
* The scale that we should render at.
* - Used to target 2x rendering even on 1x screens for better antialiasing
* - Prevents the virtual resolution from going beyond the maximum resolution
* - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels
*/
private renderScale = 1;
private parentWidth = 0;
private parentHeight = 0;
private parentDevicePixelWidth = 0;
private parentDevicePixelHeight = 0;
private devicePixelsSupported = false;
private intersectionObserver: IntersectionObserver | null = null;
private isInViewport = true;
private resizeObserver: ResizeObserver | null = null;
private setupResizeObserver = () => {
this.resizeObserver = new ResizeObserver(([entry]) => {
if (entry?.borderBoxSize[0]) {
const physicalPixelSize = entry.devicePixelContentBoxSize?.[0];
if (physicalPixelSize !== undefined) {
this.devicePixelsSupported = true;
this.parentDevicePixelWidth = physicalPixelSize.inlineSize;
this.parentDevicePixelHeight = physicalPixelSize.blockSize;
}
this.parentWidth = entry.borderBoxSize[0].inlineSize;
this.parentHeight = entry.borderBoxSize[0].blockSize;
}
this.handleResize();
});
this.resizeObserver.observe(this.parentElement);
};
private setupIntersectionObserver = () => {
// we check element's own window to support shaders used within iframe/PiP elements
const view = this.ownerDocument.defaultView;
if (!view?.IntersectionObserver) return;
this.intersectionObserver = new view.IntersectionObserver(([entry]) => {
this.isInViewport = entry?.isIntersecting ?? true;
this.updateCurrentSpeed();
});
this.intersectionObserver.observe(this.parentElement);
};
// Visual viewport resize handler, mainly used to react to browser zoom changes.
// Resize observer by itself does not react to pinch zoom, and although it usually
// reacts to classic browser zoom, it's not guaranteed in edge cases.
// Since timing between visual viewport changes and resize observer is complex
// and because we'd like to know the device pixel sizes of elements, we just restart
// the observer to get a guaranteed fresh callback regardless if it would have triggered or not.
private handleVisualViewportChange = () => {
this.resizeObserver?.disconnect();
this.setupResizeObserver();
// In case of debugging timing, from here on:
// - animation frame 1: a paint after the visual viewport resize
// - animation frame 2: a paint after the resize observer has been handled, if it was ever triggered
};
/** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
private handleResize = () => {
// Aim to render at least as many pixels as physically displayed
// This will overshoot when the user zooms out, but that's acceptable
let targetPixelWidth = 0;
let targetPixelHeight = 0;
// If window.devicePixelRatio is below 1, it's safe to say the browser is just zoomed out
// We can use 1 as the minimum value not to upscale it needlessly to meet the min pixel ratio param
const dpr = Math.max(1, window.devicePixelRatio);
const pinchZoom = visualViewport?.scale ?? 1;
if (this.devicePixelsSupported) {
// Use the real pixel size if we know it, plus meet the min pixel ratio requirement and add in pinch zoom
const scaleToMeetMinPixelRatio = Math.max(1, this.minPixelRatio / dpr);
targetPixelWidth = this.parentDevicePixelWidth * scaleToMeetMinPixelRatio * pinchZoom;
targetPixelHeight = this.parentDevicePixelHeight * scaleToMeetMinPixelRatio * pinchZoom;
} else {
// Otherwise try to approximate the element size in device pixels using devicePixelRatio.
// (devicePixelRatio is imprecise and element's width/height may be fractional CSS sizes, not real pixels).
let targetRenderScale = Math.max(dpr, this.minPixelRatio) * pinchZoom;
if (this.isSafari) {
// As of 2025, Safari reports physical devicePixelRatio, but other browsers add the current zoom level:
// https://bugs.webkit.org/show_bug.cgi?id=124862
//
// In Safari we need to factor in the zoom level manually in order to set the target resolution.
// To avoid sidebars upscaling the target resolution, set a minimum zoom level of 1.
// This will render at higher resolution when zoomed out, but that's fine.
// (We mostly care about maintaining good quality when zoomed in).
const zoomLevel = bestGuessBrowserZoom(this.ownerDocument);
targetRenderScale *= Math.max(1, zoomLevel);
}
// Rounding the client width/height since they may be fractional in CSS layout values
targetPixelWidth = Math.round(this.parentWidth) * targetRenderScale;
targetPixelHeight = Math.round(this.parentHeight) * targetRenderScale;
}
// Prevent the total rendered pixel count from exceeding maxPixelCount
const maxPixelCountHeadroom = Math.sqrt(this.maxPixelCount) / Math.sqrt(targetPixelWidth * targetPixelHeight);
const scaleToMeetMaxPixelCount = Math.min(1, maxPixelCountHeadroom);
const newWidth = Math.round(targetPixelWidth * scaleToMeetMaxPixelCount);
const newHeight = Math.round(targetPixelHeight * scaleToMeetMaxPixelCount);
const newRenderScale = newWidth / Math.round(this.parentWidth);
if (
this.canvasElement.width !== newWidth ||
this.canvasElement.height !== newHeight ||
this.renderScale !== newRenderScale // Usually, only render scale changes when the user zooms in/out
) {
this.renderScale = newRenderScale;
this.canvasElement.width = newWidth;
this.canvasElement.height = newHeight;
this.resolutionChanged = true;
this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
// this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)
this.render(performance.now());
}
};
private render = (currentTime: number) => {
if (this.hasBeenDisposed) return;
if (this.program === null) {
console.warn('Tried to render before program or gl was initialized');
return;
}
// Calculate the delta time
const dt = currentTime - this.lastRenderTime;
this.lastRenderTime = currentTime;
// Increase the total animation time by dt * animationSpeed
if (this.currentSpeed !== 0) {
this.currentFrame += dt * this.currentSpeed;
}
// Clear the canvas
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
// Update uniforms
this.gl.useProgram(this.program);
// Update the time uniform
this.gl.uniform1f(this.uniformLocations.u_time!, this.currentFrame * 0.001);
// If the resolution has changed, we need to update the uniform
if (this.resolutionChanged) {
this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);
this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, this.renderScale);
this.resolutionChanged = false;
}
this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
// Loop if we're animating
if (this.currentSpeed !== 0) {
this.requestRender();
} else {
this.rafId = null;
}
};
private requestRender = () => {
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId);
}
this.rafId = requestAnimationFrame(this.render);
};
/** Creates a texture from an image and sets it into a uniform value */
private setTextureUniform = (uniformName: string, image: HTMLImageElement): void => {
if (!image.complete || image.naturalWidth === 0) {
throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);
}
// Clean up existing texture if present
const existingTexture = this.textures.get(uniformName);
if (existingTexture) {
this.gl.deleteTexture(existingTexture);
}
// Get texture unit
if (!this.textureUnitMap.has(uniformName)) {
this.textureUnitMap.set(uniformName, this.textureUnitMap.size);
}
const textureUnit = this.textureUnitMap.get(uniformName)!;
// Activate correct texture unit before creating the texture
this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
// Create and set up the new texture
const texture = this.gl.createTexture();
this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
// Set texture parameters
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
// Upload image to texture
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);
// Generate mipmaps if the uniform is in the mipmaps list
if (this.mipmaps.includes(uniformName)) {
this.gl.generateMipmap(this.gl.TEXTURE_2D);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR_MIPMAP_LINEAR);
}
const error = this.gl.getError();
if (error !== this.gl.NO_ERROR || texture === null) {
console.error('Paper Shaders: WebGL error when uploading texture:', error);
return;
}
// Store the texture
this.textures.set(uniformName, texture);
// Set up texture unit and uniform
const location = this.uniformLocations[uniformName];
if (location) {
this.gl.uniform1i(location, textureUnit);
// Calculate and set the aspect ratio uniform
const aspectRatioUniformName = `${uniformName}AspectRatio`;
const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];
if (aspectRatioLocation) {
const aspectRatio = image.naturalWidth / image.naturalHeight;
this.gl.uniform1f(aspectRatioLocation, aspectRatio);
}
}
};
/** Utility: recursive equality test for all the uniforms */
private areUniformValuesEqual = (a: any, b: any): boolean => {
if (a === b) return true;
if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
return a.every((val, i) => this.areUniformValuesEqual(val, (b as any)[i]));
}
return false;
};
/** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */
private setUniformValues = (updatedUniforms: ShaderMountUniforms) => {
this.gl.useProgram(this.program);
Object.entries(updatedUniforms).forEach(([key, value]) => {
// Grab the value to use in the uniform cache
let cacheValue: ShaderMountUniforms[keyof ShaderMountUniforms] | string = value;
if (value instanceof HTMLImageElement) {
// Images use their src for the cache value to save memory
cacheValue = `${value.src.slice(0, 200)}|${value.naturalWidth}x${value.naturalHeight}`;
}
// Check if the uniform value has changed and, if not, bail early to avoid extra work
if (this.areUniformValuesEqual(this.uniformCache[key], cacheValue)) return;
// Update the uniform cache if we are still here
this.uniformCache[key] = cacheValue;
const location = this.uniformLocations[key];
if (!location) {
console.warn(`Uniform location for ${key} not found`);
return;
}
if (value instanceof HTMLImageElement) {
// Texture case, requires a good amount of code so it gets its own function:
this.setTextureUniform(key, value);
} else if (Array.isArray(value)) {
// Array case
let flatArray: number[] | null = null;
let valueLength: number | null = null;
// If it's an array of same-sized arrays, flatten it down so we can set the uniform
if (value[0] !== undefined && Array.isArray(value[0])) {
const firstChildLength = value[0].length;
if (value.every((arr) => (arr as number[]).length === firstChildLength)) {
// Array of same-sized arrays case, flattens the array sets it
flatArray = value.flat();
valueLength = firstChildLength;
} else {
console.warn(`All child arrays must be the same length for ${key}`);
return;
}
} else {
// Array of primitive values case, supports 2, 3, 4, 9, 16 length arrays
flatArray = value as number[];
valueLength = flatArray.length;
}
// Set the uniform based on array length... supports 2, 3, 4, 9, 16 length arrays of primitive values
// or arbitrary length arrays of arrays
switch (valueLength) {
case 2:
this.gl.uniform2fv(location, flatArray);
break;
case 3:
this.gl.uniform3fv(location, flatArray);
break;
case 4:
this.gl.uniform4fv(location, flatArray);
break;
case 9:
this.gl.uniformMatrix3fv(location, false, flatArray);
break;
case 16:
this.gl.uniformMatrix4fv(location, false, flatArray);
break;
default:
console.warn(`Unsupported uniform array length: ${valueLength}`);
}
} else if (typeof value === 'number') {
// Number case, supports floats and ints
this.gl.uniform1f(location, value);
} else if (typeof value === 'boolean') {
// Boolean case, supports true and false
this.gl.uniform1i(location, value ? 1 : 0);
} else {
// May happen on the server for SSR when undefined images are passed in
console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);
}
});
};
/** Gets the current total animation time from 0ms */
public getCurrentFrame = (): number => {
return this.currentFrame;
};
/** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */
public setFrame = (newFrame: number): void => {
this.currentFrame = newFrame;
this.lastRenderTime = performance.now();
this.render(performance.now());
};
/** Set an animation speed (or 0 to stop animation) */
public setSpeed = (newSpeed = 1): void => {
// Set the new animation speed
this.speed = newSpeed;
this.updateCurrentSpeed();
};
/** Apply the target speed, pausing (0) while the tab is hidden or the element is out of the viewport */
private updateCurrentSpeed = (): void => {
this.setCurrentSpeed(this.ownerDocument.hidden || !this.isInViewport ? 0 : this.speed);
};
private setCurrentSpeed = (newSpeed: number): void => {
this.currentSpeed = newSpeed;
if (this.rafId === null && newSpeed !== 0) {
// Moving from 0 to animating, kick off a new rAF loop
this.lastRenderTime = performance.now();
this.rafId = requestAnimationFrame(this.render);
}
if (this.rafId !== null && newSpeed === 0) {
// Moving from animating to not animating, cancel the rAF loop
cancelAnimationFrame(this.rafId);
this.rafId = null;
}
};
/** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
public setMaxPixelCount = (newMaxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT): void => {
this.maxPixelCount = newMaxPixelCount;
this.handleResize();
};
/** Set the minimum pixel ratio for the shader */
public setMinPixelRatio = (newMinPixelRatio: number = 2): void => {
this.minPixelRatio = newMinPixelRatio;
this.handleResize();
};
/** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
public setUniforms = (newUniforms: ShaderMountUniforms): void => {
this.setUniformValues(newUniforms);
this.providedUniforms = { ...this.providedUniforms, ...newUniforms };
this.render(performance.now());
};
private handleDocumentVisibilityChange = () => {
this.updateCurrentSpeed();
};
/** Dispose of the shader mount, cleaning up all of the WebGL resources */
public dispose = (): void => {
// Immediately mark as disposed to prevent future renders from leaking in
this.hasBeenDisposed = true;
// Cancel the rAF loop
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId);
this.rafId = null;
}
if (this.gl && this.program) {
// Clean up all textures
this.textures.forEach((texture) => {
this.gl.deleteTexture(texture);
});
this.textures.clear();
this.gl.deleteProgram(this.program);
this.program = null;
// Reset the WebGL context
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
// Clear any errors
this.gl.getError();
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
this.intersectionObserver = null;
}
visualViewport?.removeEventListener('resize', this.handleVisualViewportChange);
this.ownerDocument.removeEventListener('visibilitychange', this.handleDocumentVisibilityChange);
this.uniformLocations = {};
// Remove the shader from the div wrapper element
this.canvasElement.remove();
// Free up the reference to self to enable garbage collection
delete this.parentElement.paperShaderMount;
};
}
function createShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {
const shader = gl.createShader(type);
if (!shader) return null;
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
function createProgram(
gl: WebGL2RenderingContext,
vertexShaderSource: string,
fragmentShaderSource: string
): WebGLProgram | null {
const format = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);
const precision = format ? format.precision : null;
// MEDIUM_FLOAT precision can be 10, 16 or 23 bits depending on device;
// Shaders fail on 10 bit (and 16 bit is hard to test) => we force 23-bit by switching to highp
if (precision && precision < 23) {
vertexShaderSource = vertexShaderSource.replace(/precision\s+(lowp|mediump)\s+float;/g, 'precision highp float;');
fragmentShaderSource = fragmentShaderSource
.replace(/precision\s+(lowp|mediump)\s+float/g, 'precision highp float')
.replace(/\b(uniform|varying|attribute)\s+(lowp|mediump)\s+(\w+)/g, '$1 highp $3');
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
if (!vertexShader || !fragmentShader) return null;
const program = gl.createProgram();
if (!program) return null;
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
gl.deleteProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
return null;
}
// Clean up shaders after successful linking
gl.detachShader(program, vertexShader);
gl.detachShader(program, fragmentShader);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
return program;
}
const defaultStyle = `@layer paper-shaders {
:where([data-paper-shader]) {
isolation: isolate;
position: relative;
& canvas {
contain: strict;
display: block;
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: inherit;
corner-shape: inherit;
}
}
}`;
/** The parent `<div>` element that has a ShaderMount available on it */
export interface PaperShaderElement extends HTMLElement {
paperShaderMount: ShaderMount | undefined;
}
/** Check if an element is a Paper shader element */
export function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {
return 'paperShaderMount' in element;
}
/**
* Uniform types that we support to be auto-mapped into the fragment shader
*
* We accept undefined as a convenience for server rendering, when some things may be undefined
* We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
*/
export interface ShaderMountUniforms {
[key: string]: boolean | number | number[] | number[][] | HTMLImageElement | undefined;
}
export interface ShaderMotionParams {
speed?: number;
frame?: number;
}
export type ShaderPreset<T> = {
name: string;
params: Required<T>;
};
export type ImageShaderPreset<T> = {
name: string;
/**
* Params for the shader excluding the image.
* Image is excluded as it isn't considered a preset,
* e.g. when switching between presets it shouldn't switch the image.
*
* While we exclude images from presets they should still be set with a default prop value so the code-first usage of shaders remains great.
*/
params: Required<Omit<T, 'image'>>;
};
function isSafari() {
const ua = navigator.userAgent.toLowerCase();
return ua.includes('safari') && !ua.includes('chrome') && !ua.includes('android');
}
// Zoom level can be estimated comparing the browser's outerWidth and the viewport width.
// It's nowhere near perfect because it's affected by the presence of browser sidebars,
// like a vertical web inspector or Arc's sidebar. Also, both outerWidth and innerWidth
// are integers, which would almost never give us a perfect ratio at face values.
//
// Still, this is pretty accurate in the vast majority of cases.
//
// Note 1:
// Avoid innerWidth, use visualViewport.width instead.
// - innerWidth is affected by pinch zoom in Safari, but not other browsers.
// visualViewport.width works consistently in all browsers.
// - innerWidth is rounded to integer, but not visualViewport.width.
// - visualViewport.width is affected by hard scrollbars, so they need to be added manually
//
// Note 2:
// Opening a sidebar in Safari like web inspector or bookmarks will throw off the zoom
// level detection and result in a larger target resolution. Not a concern in real-world usage
// with Safari, but we'd rather not try to detect zoom levels with other browsers
// (e.g. Arc always has a sidebar, which affects outerWidth vs visualViewport.width).
function bestGuessBrowserZoom(doc: Document) {
const viewportScale = visualViewport?.scale ?? 1;
const viewportWidth = visualViewport?.width ?? window.innerWidth;
const scrollbarWidth = window.innerWidth - doc.documentElement.clientWidth;
const innerWidth = viewportScale * viewportWidth + scrollbarWidth;
// outerWidth and innerWidth are always integers so we won't often get the original zoom ratio
// E.g. given a 125% zoom, outerWidth = 1657, innerWidth = 1325, 1657 / 1325 = 1.2505660377
// We check for common zoom levels and return the closest one if found.
const ratio = outerWidth / innerWidth;
const zoomPercentageRounded = Math.round(100 * ratio);
// All zoom levels divisible by 5%
if (zoomPercentageRounded % 5 === 0) {
return zoomPercentageRounded / 100;
}
// 33% zoom
if (zoomPercentageRounded === 33) {
return 1 / 3;
}
// 67% zoom
if (zoomPercentageRounded === 67) {
return 2 / 3;
}
// 133% zoom
if (zoomPercentageRounded === 133) {
return 4 / 3;
}
return ratio;
}
packages/shaders/src/shader-sizing.ts
export interface ShaderSizingUniforms {
u_fit: (typeof ShaderFitOptions)[ShaderFit];
u_scale: number;
u_rotation: number;
u_originX: number;
u_originY: number;
u_offsetX: number;
u_offsetY: number;
u_worldWidth: number;
u_worldHeight: number;
}
export interface ShaderSizingParams {
fit?: 'none' | 'contain' | 'cover';
scale?: number;
rotation?: number;
originX?: number;
originY?: number;
offsetX?: number;
offsetY?: number;
worldWidth?: number;
worldHeight?: number;
}
export const defaultObjectSizing: Required<ShaderSizingParams> = {
fit: 'contain',
scale: 1,
rotation: 0,
offsetX: 0,
offsetY: 0,
originX: 0.5,
originY: 0.5,
worldWidth: 0,
worldHeight: 0,
};
export const defaultPatternSizing: Required<ShaderSizingParams> = {
fit: 'none',
scale: 1,
rotation: 0,
offsetX: 0,
offsetY: 0,
originX: 0.5,
originY: 0.5,
worldWidth: 0,
worldHeight: 0,
};
export const ShaderFitOptions = {
none: 0,
contain: 1,
cover: 2,
} as const;
export type ShaderFit = keyof typeof ShaderFitOptions;
packages/shaders/src/shader-utils.ts
// language=GLSL
export const declarePI = `
#define TWO_PI 6.28318530718
#define PI 3.14159265358979323846
`;
// language=GLSL
export const rotation2 = `
vec2 rotate(vec2 uv, float th) {
return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
}
`;
// language=GLSL
export const proceduralHash11 = `
float hash11(float p) {
p = fract(p * 0.3183099) + 0.1;
p *= p + 19.19;
return fract(p * p);
}
`;
// language=GLSL
export const proceduralHash21 = `
float hash21(vec2 p) {
p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
p += dot(p, p + 19.19);
return fract(p.x * p.y);
}
`;
// language=GLSL
export const proceduralHash22 = `
vec2 hash22(vec2 p) {
p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
p += dot(p, p.yx + 19.19);
return fract(vec2(p.x * p.y, p.x + p.y));
}
`;
// language=GLSL
export const textureRandomizerR = `
float randomR(vec2 p) {
vec2 uv = floor(p) / 100. + .5;
return texture(u_noiseTexture, fract(uv)).r;
}
`;
// language=GLSL
export const textureRandomizerGB = `
vec2 randomGB(vec2 p) {
vec2 uv = floor(p) / 100. + .5;
return texture(u_noiseTexture, fract(uv)).gb;
}
`;
// language=GLSL
export const colorBandingFix = `
color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
`;
// language=GLSL
export const simplexNoise = `
vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
float snoise(vec2 v) {
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy));
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
+ i.x + vec3(0.0, i1.x, 1.0));
vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
dot(x12.zw, x12.zw)), 0.0);
m = m * m;
m = m * m;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
`;
// language=GLSL
export const fiberNoise = `
float fiberRandom(vec2 p) {
vec2 uv = floor(p) / 100.;
return texture(u_noiseTexture, fract(uv)).b;
}
float fiberValueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = fiberRandom(i);
float b = fiberRandom(i + vec2(1.0, 0.0));
float c = fiberRandom(i + vec2(0.0, 1.0));
float d = fiberRandom(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
float fiberNoiseFbm(in vec2 n, vec2 seedOffset) {
float total = 0.0, amplitude = 1.;
for (int i = 0; i < 4; i++) {
n = rotate(n, .7);
total += fiberValueNoise(n + seedOffset) * amplitude;
n *= 2.;
amplitude *= 0.6;
}
return total;
}
float fiberNoise(vec2 uv, vec2 seedOffset) {
float epsilon = 0.001;
float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);
float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);
float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);
float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);
return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);
}
`;
packages/shaders/src/shaders/color-panels.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, colorBandingFix } from '../shader-utils.js';
export const colorPanelsMeta = {
maxColorCount: 7,
} as const;
/**
* Pseudo-3D semi-transparent panels rotating around a central axis
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_scale (float): Overall zoom level, used for anti-aliasing calculations
* - u_colors (vec4[]): Up to 7 RGBA colors used to color the panels
* - u_colorsCount (float): Number of active colors
* - u_colorBack (vec4): Background color in RGBA
* - u_density (float): Angle between every 2 panels (0.25 to 7)
* - u_angle1 (float): Skew angle applied to all panes (-1 to 1)
* - u_angle2 (float): Skew angle applied to all panes (-1 to 1)
* - u_length (float): Panel length relative to total height (0 to 3)
* - u_edges (bool): Color highlight on the panels edges
* - u_blur (float): Side blur, 0 for sharp edges (0 to 0.5)
* - u_fadeIn (float): Transparency near central axis (0 to 1)
* - u_fadeOut (float): Transparency near viewer (0 to 1)
* - u_gradient (float): Color mixing within a panel, 0 = solid, 1 = gradient, needs 2+ colors (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const colorPanelsFragmentShader: string = `#version 300 es
precision lowp float;
uniform float u_time;
uniform mediump float u_scale;
uniform vec4 u_colors[${ colorPanelsMeta.maxColorCount }];
uniform float u_colorsCount;
uniform vec4 u_colorBack;
uniform float u_density;
uniform float u_angle1;
uniform float u_angle2;
uniform float u_length;
uniform bool u_edges;
uniform float u_blur;
uniform float u_fadeIn;
uniform float u_fadeOut;
uniform float u_gradient;
in vec2 v_objectUV;
out vec4 fragColor;
${ declarePI }
const float zLimit = .5;
vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
float sinA = sin(angle);
float cosA = cos(angle);
float denom = sinA - uv.y * cosA;
if (abs(denom) < .01) return vec2(0.);
float z = uv.y / denom;
if (z <= 0. || z > zLimit) return vec2(0.);
float zRatio = z / zLimit;
float panelMap = 1. - zRatio;
float x = uv.x * (cosA * z + 1.) * invLength;
float zOffset = zRatio - .5;
float left = -.5 + zOffset * u_angle1;
float right = .5 - zOffset * u_angle2;
float blurX = aa + 2. * panelMap * u_blur;
float leftEdge1 = left - blurX;
float leftEdge2 = left + .25 * blurX;
float rightEdge1 = right - .25 * blurX;
float rightEdge2 = right + blurX;
float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));
float midScreen = abs(sinA);
if (u_edges == true) {
panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));
} else if (midScreen < .07) {
panel *= (midScreen * 15.);
}
return vec2(panel, panelMap);
}
vec4 blendColor(vec4 colorA, float panelMask, float panelMap) {
float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);
fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);
vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);
float blendedAlpha = mix(0., colorA.a, fade);
return vec4(blendedRGB, blendedAlpha) * panelMask;
}
void main() {
vec2 uv = v_objectUV;
uv *= 1.25;
float t = .02 * u_time;
t = fract(t);
bool reverseTime = (t < 0.5);
vec3 color = vec3(0.);
float opacity = 0.;
float aa = .005 / u_scale;
int colorsCount = int(u_colorsCount);
vec4 premultipliedColors[${ colorPanelsMeta.maxColorCount }];
for (int i = 0; i < ${ colorPanelsMeta.maxColorCount }; i++) {
if (i >= colorsCount) break;
vec4 c = u_colors[i];
c.rgb *= c.a;
premultipliedColors[i] = c;
}
float invLength = 1.5 / max(u_length, .001);
float totalColorWeight = 0.;
int panelsNumber = 12;
float densityNormalizer = 1.;
if (colorsCount == 4) {
panelsNumber = 16;
densityNormalizer = 1.34;
} else if (colorsCount == 5) {
panelsNumber = 20;
densityNormalizer = 1.67;
} else if (colorsCount == 7) {
panelsNumber = 14;
densityNormalizer = 1.17;
}
float fPanelsNumber = float(panelsNumber);
float totalPanelsShape = 0.;
float panelGrad = 1. - clamp(u_gradient, 0., 1.);
for (int set = 0; set < 2; set++) {
bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);
if (!isForward) continue;
for (int i = 0; i <= 20; i++) {
if (i >= panelsNumber) break;
int idx = panelsNumber - 1 - i;
float offset = float(idx) / fPanelsNumber;
if (set == 1) {
offset += .5;
}
float densityFract = densityNormalizer * fract(t + offset);
float angleNorm = densityFract / u_density;
if (densityFract >= .5 || angleNorm >= .3) continue;
float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);
if (smoothDensity * smoothAngle < .001) continue;
if (angleNorm > .5) {
angleNorm = 0.5;
}
vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
if (panel[0] <= .001) continue;
float panelMask = panel[0] * smoothDensity * smoothAngle;
float panelMap = panel[1];
int colorIdx = idx % colorsCount;
int nextColorIdx = (idx + 1) % colorsCount;
vec4 colorA = premultipliedColors[colorIdx];
vec4 colorB = premultipliedColors[nextColorIdx];
colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
vec4 blended = blendColor(colorA, panelMask, panelMap);
color = blended.rgb + color * (1. - blended.a);
opacity = blended.a + opacity * (1. - blended.a);
}
for (int i = 0; i <= 20; i++) {
if (i >= panelsNumber) break;
int idx = panelsNumber - 1 - i;
float offset = float(idx) / fPanelsNumber;
if (set == 0) {
offset += .5;
}
float densityFract = densityNormalizer * fract(-t + offset);
float angleNorm = -densityFract / u_density;
if (densityFract >= .5 || angleNorm < -.3) continue;
float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);
if (smoothDensity * smoothAngle < .001) continue;
vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
float panelMask = panel[0] * smoothDensity * smoothAngle;
if (panelMask <= .001) continue;
float panelMap = panel[1];
int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;
if (colorIdx < 0) colorIdx += colorsCount;
int nextColorIdx = (colorIdx + 1) % colorsCount;
vec4 colorA = premultipliedColors[colorIdx];
vec4 colorB = premultipliedColors[nextColorIdx];
colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
vec4 blended = blendColor(colorA, panelMask, panelMap);
color = blended.rgb + color * (1. - blended.a);
opacity = blended.a + opacity * (1. - blended.a);
}
}
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1.0 - opacity);
opacity = opacity + u_colorBack.a * (1.0 - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface ColorPanelsUniforms extends ShaderSizingUniforms {
u_colors: vec4[];
u_colorsCount: number;
u_colorBack: [number, number, number, number];
u_angle1: number;
u_angle2: number;
u_length: number;
u_edges: boolean;
u_blur: number;
u_fadeIn: number;
u_fadeOut: number;
u_density: number;
u_gradient: number;
}
export interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {
colors?: string[];
colorBack?: string;
angle1?: number;
angle2?: number;
length?: number;
edges?: boolean;
blur?: number;
fadeIn?: number;
fadeOut?: number;
density?: number;
gradient?: number;
}
packages/shaders/src/shaders/dithering.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import {
type ShaderSizingParams,
type ShaderSizingUniforms,
} from '../shader-sizing.js';
import { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';
/**
* Animated 2-color dithering over multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere).
*
* SIZING NOTE: This shader performs sizing in the fragment shader (not vertex shader) to keep
* u_pxSize in consistent actual pixels. The pixel grid is computed from gl_FragCoord before any
* transforms, so scaling/rotating only affects the underlying pattern shape.
* No vertex shader outputs (v_objectUV, v_patternUV, etc.) are used.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_colorBack (vec4): Background color in RGBA
* - u_colorFront (vec4): Foreground (ink) color in RGBA
* - u_shape (float): Shape pattern type (1 = simplex, 2 = warp, 3 = dots, 4 = wave, 5 = ripple, 6 = swirl, 7 = sphere)
* - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)
* - u_pxSize (float): Pixel size of dithering grid (0.5 to 20)
*
* */
// language=GLSL
export const ditheringFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
uniform float u_pixelRatio;
uniform float u_originX;
uniform float u_originY;
uniform float u_worldWidth;
uniform float u_worldHeight;
uniform float u_fit;
uniform float u_scale;
uniform float u_rotation;
uniform float u_offsetX;
uniform float u_offsetY;
uniform float u_pxSize;
uniform vec4 u_colorBack;
uniform vec4 u_colorFront;
uniform float u_shape;
uniform float u_type;
out vec4 fragColor;
${ simplexNoise }
${ declarePI }
${ proceduralHash11 }
${ proceduralHash21 }
float getSimplexNoise(vec2 uv, float t) {
float noise = .5 * snoise(uv - vec2(0., .3 * t));
noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
return noise;
}
const int bayer2x2[4] = int[4](0, 2, 3, 1);
const int bayer4x4[16] = int[16](
0, 8, 2, 10,
12, 4, 14, 6,
3, 11, 1, 9,
15, 7, 13, 5
);
const int bayer8x8[64] = int[64](
0, 32, 8, 40, 2, 34, 10, 42,
48, 16, 56, 24, 50, 18, 58, 26,
12, 44, 4, 36, 14, 46, 6, 38,
60, 28, 52, 20, 62, 30, 54, 22,
3, 35, 11, 43, 1, 33, 9, 41,
51, 19, 59, 27, 49, 17, 57, 25,
15, 47, 7, 39, 13, 45, 5, 37,
63, 31, 55, 23, 61, 29, 53, 21
);
float getBayerValue(vec2 uv, int size) {
ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
int index = pos.y * size + pos.x;
if (size == 2) {
return float(bayer2x2[index]) / 4.0;
} else if (size == 4) {
return float(bayer4x4[index]) / 16.0;
} else if (size == 8) {
return float(bayer8x8[index]) / 64.0;
}
return 0.0;
}
void main() {
float t = .5 * u_time;
float pxSize = u_pxSize * u_pixelRatio;
vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;
pxSizeUV /= pxSize;
vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
vec2 normalizedUV = canvasPixelizedUV / u_resolution;
vec2 ditheringNoiseUV = canvasPixelizedUV;
vec2 shapeUV = normalizedUV;
vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
float r = u_rotation * PI / 180.;
mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
vec2 boxSize = vec2(
(u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
(u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
);
if (u_shape > 3.5) {
vec2 objectBoxSize = vec2(0.);
// fit = none
objectBoxSize.x = min(boxSize.x, boxSize.y);
if (u_fit == 1.) { // fit = contain
objectBoxSize.x = min(u_resolution.x, u_resolution.y);
} else if (u_fit == 2.) { // fit = cover
objectBoxSize.x = max(u_resolution.x, u_resolution.y);
}
objectBoxSize.y = objectBoxSize.x;
vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
shapeUV *= objectWorldScale;
shapeUV += boxOrigin * (objectWorldScale - 1.);
shapeUV += vec2(-u_offsetX, u_offsetY);
shapeUV /= u_scale;
shapeUV = graphicRotation * shapeUV;
} else {
vec2 patternBoxSize = vec2(0.);
// fit = none
patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.y);
float patternWorldNoFitBoxWidth = patternBoxSize.x;
if (u_fit == 1.) { // fit = contain
patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y);
} else if (u_fit == 2.) { // fit = cover
patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y);
}
patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;
shapeUV += boxOrigin;
shapeUV -= boxOrigin / patternWorldScale;
shapeUV *= u_resolution.xy;
shapeUV /= u_pixelRatio;
if (u_fit > 0.) {
shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);
}
shapeUV /= u_scale;
shapeUV = graphicRotation * shapeUV;
shapeUV += boxOrigin / patternWorldScale;
shapeUV -= boxOrigin;
shapeUV += .5;
}
float shape = 0.;
if (u_shape < 1.5) {
// Simplex noise
shapeUV *= .001;
shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);
shape = smoothstep(0.3, 0.9, shape);
} else if (u_shape < 2.5) {
// Warp
shapeUV *= .003;
for (float i = 1.0; i < 6.0; i++) {
shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);
shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);
}
shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));
shape = smoothstep(0.02, 1., shape);
} else if (u_shape < 3.5) {
// Dots
shapeUV *= .05;
float stripeIdx = floor(2. * shapeUV.x / TWO_PI);
float rand = hash11(stripeIdx * 10.);
rand = sign(rand - .5) * pow(.1 + abs(rand), .4);
shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);
shape = pow(abs(shape), 6.);
} else if (u_shape < 4.5) {
// Sine wave
shapeUV *= 4.;
float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));
shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);
} else if (u_shape < 5.5) {
// Ripple
float dist = length(shapeUV);
float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
shape = waves;
} else if (u_shape < 6.5) {
// Swirl
float l = length(shapeUV);
float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;
float twist = 1.2;
float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI;
float mid = smoothstep(0., 1., pow(l, twist));
shape = mix(0., fract(offset), mid);
} else {
// Sphere
shapeUV *= 2.;
float d = 1. - pow(length(shapeUV), 2.);
vec3 pos = vec3(shapeUV, sqrt(max(0., d)));
vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
shape = .5 + .5 * dot(lightPos, pos);
shape *= step(0., d);
}
int type = int(floor(u_type));
float dithering = 0.0;
switch (type) {
case 1: {
dithering = step(hash21(ditheringNoiseUV), shape);
} break;
case 2:
dithering = getBayerValue(pxSizeUV, 2);
break;
case 3:
dithering = getBayerValue(pxSizeUV, 4);
break;
default :
dithering = getBayerValue(pxSizeUV, 8);
break;
}
dithering -= .5;
float res = step(.5, shape + dithering);
vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
float fgOpacity = u_colorFront.a;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
float bgOpacity = u_colorBack.a;
vec3 color = fgColor * res;
float opacity = fgOpacity * res;
color += bgColor * (1. - opacity);
opacity += bgOpacity * (1. - opacity);
fragColor = vec4(color, opacity);
}
`;
export interface DitheringUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colorFront: [number, number, number, number];
u_shape: (typeof DitheringShapes)[DitheringShape];
u_type: (typeof DitheringTypes)[DitheringType];
u_pxSize: number;
}
export interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colorFront?: string;
shape?: DitheringShape;
type?: DitheringType;
size?: number;
}
export const DitheringShapes = {
simplex: 1,
warp: 2,
dots: 3,
wave: 4,
ripple: 5,
swirl: 6,
sphere: 7,
} as const;
export type DitheringShape = keyof typeof DitheringShapes;
export const DitheringTypes = {
'random': 1,
'2x2': 2,
'4x4': 3,
'8x8': 4,
} as const;
export type DitheringType = keyof typeof DitheringTypes;
packages/shaders/src/shaders/dot-grid.ts
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, simplexNoise } from '../shader-utils.js';
/**
* Static grid pattern made of circles, diamonds, squares or triangles.
*
* Fragment shader uniforms:
* - u_colorBack (vec4): Background color in RGBA
* - u_colorFill (vec4): Shape fill color in RGBA
* - u_colorStroke (vec4): Shape stroke color in RGBA, needs strokeWidth > 0
* - u_dotSize (float): Base size of each shape in pixels (1 to 100)
* - u_gapX (float): Pattern horizontal spacing in pixels (2 to 500)
* - u_gapY (float): Pattern vertical spacing in pixels (2 to 500)
* - u_strokeWidth (float): Outline stroke width in pixels, needs colorStroke alpha > 0 (0 to 50)
* - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
* - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
* - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const dotGridFragmentShader: string = `#version 300 es
precision mediump float;
uniform vec4 u_colorBack;
uniform vec4 u_colorFill;
uniform vec4 u_colorStroke;
uniform float u_dotSize;
uniform float u_gapX;
uniform float u_gapY;
uniform float u_strokeWidth;
uniform float u_sizeRange;
uniform float u_opacityRange;
uniform float u_shape;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
${ simplexNoise }
float polygon(vec2 p, float N, float rot) {
float a = atan(p.x, p.y) + rot;
float r = TWO_PI / float(N);
return cos(floor(.5 + a / r) * r - a) * length(p);
}
void main() {
// x100 is a default multiplier between vertex and fragmant shaders
// we use it to avoid UV presision issues
vec2 shape_uv = 100. * v_patternUV;
vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
vec2 grid = fract(shape_uv / gap) + 1e-4;
vec2 grid_idx = floor(shape_uv / gap);
float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
vec2 center = vec2(0.5) - 1e-3;
vec2 p = (grid - center) * vec2(u_gapX, u_gapY);
float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
float dist;
if (u_shape < 0.5) {
// Circle
dist = length(p);
} else if (u_shape < 1.5) {
// Diamond
strokeWidth *= 1.5;
dist = polygon(1.5 * p, 4., .25 * PI);
} else if (u_shape < 2.5) {
// Square
dist = polygon(1.03 * p, 4., 1e-3);
} else {
// Triangle
strokeWidth *= 1.5;
p = p * 2. - 1.;
p *= .9;
p.y = 1. - p.y;
p.y -= .75 * baseSize;
dist = polygon(p, 3., 1e-3);
}
float edgeWidth = fwidth(dist);
float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);
float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);
float stroke = shapeOuter - shapeInner;
float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);
stroke *= dotOpacity;
shapeInner *= dotOpacity;
stroke *= u_colorStroke.a;
shapeInner *= u_colorFill.a;
vec3 color = vec3(0.);
color += stroke * u_colorStroke.rgb;
color += shapeInner * u_colorFill.rgb;
color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;
float opacity = 0.;
opacity += stroke;
opacity += shapeInner;
opacity += (1. - opacity) * u_colorBack.a;
fragColor = vec4(color, opacity);
}
`;
export interface DotGridUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colorFill: [number, number, number, number];
u_colorStroke: [number, number, number, number];
u_dotSize: number;
u_gapX: number;
u_gapY: number;
u_strokeWidth: number;
u_sizeRange: number;
u_opacityRange: number;
u_shape: (typeof DotGridShapes)[DotGridShape];
}
export interface DotGridParams extends ShaderSizingParams {
colorBack?: string;
colorFill?: string;
colorStroke?: string;
size?: number;
gapX?: number;
gapY?: number;
strokeWidth?: number;
sizeRange?: number;
opacityRange?: number;
shape?: DotGridShape;
}
export const DotGridShapes = {
circle: 0,
diamond: 1,
square: 2,
triangle: 3,
} as const;
export type DotGridShape = keyof typeof DotGridShapes;
packages/shaders/src/shaders/dot-orbit.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, rotation2, textureRandomizerR, textureRandomizerGB } from '../shader-utils.js';
export const dotOrbitMeta = {
maxColorCount: 10,
} as const;
/**
* Animated multi-color dots pattern with each dot orbiting around its cell center.
* Supports up to 10 colors and various shape and motion controls.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 10 base colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc., needs 2+ colors (1 to 4)
* - u_size (float): Dot radius relative to cell size (0 to 1)
* - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
* - u_spreading (float): Maximum orbit distance around cell center, dots are static at 0 (0 to 1)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const dotOrbitFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform sampler2D u_noiseTexture;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ dotOrbitMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_stepsPerColor;
uniform float u_size;
uniform float u_sizeRange;
uniform float u_spreading;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ textureRandomizerR }
${ textureRandomizerGB }
vec3 voronoiShape(vec2 uv, float time) {
vec2 i_uv = floor(uv);
vec2 f_uv = fract(uv);
float spreading = .25 * clamp(u_spreading, 0., 1.);
float minDist = 1.;
vec2 randomizer = vec2(0.);
for (int y = -1; y <= 1; y++) {
for (int x = -1; x <= 1; x++) {
vec2 tileOffset = vec2(float(x), float(y));
vec2 rand = randomGB(i_uv + tileOffset);
vec2 cellCenter = vec2(.5 + 1e-4);
cellCenter += spreading * cos(time + TWO_PI * rand);
cellCenter -= .5;
cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);
cellCenter += .5;
float dist = length(tileOffset + cellCenter - f_uv);
if (dist < minDist) {
minDist = dist;
randomizer = rand;
}
}
}
return vec3(minDist, randomizer);
}
void main() {
vec2 shape_uv = v_patternUV;
shape_uv *= 1.5;
const float firstFrameOffset = -10.;
float t = u_time + firstFrameOffset;
vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];
float dist = voronoi[0];
float edgeWidth = fwidth(dist);
float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);
float shape = voronoi[1];
float mixer = shape * (u_colorsCount - 1.);
mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
float steps = max(1., u_stepsPerColor);
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
for (int i = 1; i < ${ dotOrbitMeta.maxColorCount }; i++) {
if (i >= int(u_colorsCount)) break;
float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
localT = round(localT * steps) / steps;
vec4 c = u_colors[i];
c.rgb *= c.a;
gradient = mix(gradient, c, localT);
}
if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
float localT = mixer + 1.;
if (mixer > (u_colorsCount - 1.)) {
localT = mixer - (u_colorsCount - 1.);
}
localT = round(localT * steps) / steps;
vec4 cFst = u_colors[0];
cFst.rgb *= cFst.a;
vec4 cLast = u_colors[int(u_colorsCount - 1.)];
cLast.rgb *= cLast.a;
gradient = mix(cLast, cFst, localT);
}
vec3 color = gradient.rgb * dots;
float opacity = gradient.a * dots;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1. - opacity);
opacity = opacity + u_colorBack.a * (1. - opacity);
fragColor = vec4(color, opacity);
}
`;
export interface DotOrbitUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_size: number;
u_sizeRange: number;
u_spreading: number;
u_stepsPerColor: number;
u_noiseTexture?: HTMLImageElement;
}
export interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colors?: string[];
size?: number;
sizeRange?: number;
spreading?: number;
stepsPerColor?: number;
}
packages/shaders/src/shaders/fluted-glass.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';
/**
* Fluted glass image filter that transforms an image into streaked, ribbed distortions,
* giving a mix of clarity and obscurity.
*
* Fragment shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_image (sampler2D): Source image texture
* - u_imageAspectRatio (float): Aspect ratio of the source image
* - u_colorBack (vec4): Background color in RGBA
* - u_colorShadow (vec4): Shadows color in RGBA, needs shadows > 0
* - u_colorHighlight (vec4): Highlights color in RGBA, needs highlights > 0
* - u_shadows (float): Color gradient added over image and background, following distortion shape, needs colorShadow alpha > 0 (0 to 1)
* - u_highlights (float): Thin strokes along distortion shape, useful for antialiasing on small grid (0 to 1)
* - u_size (float): Size of the distortion shape grid (0 to 1)
* - u_shape (float): Grid shape (1 = lines, 2 = linesIrregular, 3 = wave, 4 = zigzag, 5 = pattern)
* - u_angle (float): Direction of the grid relative to the image in degrees (0 to 180)
* - u_distortionShape (float): Shape of distortion (1 = prism, 2 = lens, 3 = contour, 4 = cascade, 5 = flat)
* - u_distortion (float): Power of distortion applied within each stripe (0 to 1)
* - u_shift (float): Texture shift in direction opposite to the grid, needs distortion > 0 (-1 to 1)
* - u_stretch (float): Extra distortion along the grid lines (0 to 1)
* - u_blur (float): One-directional blur over the image and extra blur around edges (0 to 1)
* - u_edges (float): Glass distortion and softness on the image edges (0 to 1)
* - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)
* - u_marginRight (float): Distance from the right edge to the effect (0 to 1)
* - u_marginTop (float): Distance from the top edge to the effect (0 to 1)
* - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)
* - u_grainMixer (float): Strength of grain distortion applied to shape edges, needs distortion > 0 (0 to 1)
* - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const flutedGlassFragmentShader: string = `#version 300 es
precision mediump float;
uniform vec2 u_resolution;
uniform float u_pixelRatio;
uniform vec4 u_colorBack;
uniform vec4 u_colorShadow;
uniform vec4 u_colorHighlight;
uniform sampler2D u_image;
uniform float u_imageAspectRatio;
uniform float u_size;
uniform float u_shadows;
uniform float u_angle;
uniform float u_stretch;
uniform float u_shape;
uniform float u_distortion;
uniform float u_highlights;
uniform float u_distortionShape;
uniform float u_shift;
uniform float u_blur;
uniform float u_edges;
uniform float u_marginLeft;
uniform float u_marginRight;
uniform float u_marginTop;
uniform float u_marginBottom;
uniform float u_grainMixer;
uniform float u_grainOverlay;
in vec2 v_imageUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ proceduralHash21 }
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = hash21(i);
float b = hash21(i + vec2(1.0, 0.0));
float c = hash21(i + vec2(0.0, 1.0));
float d = hash21(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
float getUvFrame(vec2 uv, float softness) {
float aax = 2. * fwidth(uv.x);
float aay = 2. * fwidth(uv.y);
float left = smoothstep(0., aax + softness, uv.x);
float right = 1. - smoothstep(1. - softness - aax, 1., uv.x);
float bottom = smoothstep(0., aay + softness, uv.y);
float top = 1. - smoothstep(1. - softness - aay, 1., uv.y);
return left * right * bottom * top;
}
const int MAX_RADIUS = 50;
vec4 samplePremultiplied(sampler2D tex, vec2 uv) {
vec4 c = texture(tex, uv);
c.rgb *= c.a;
return c;
}
vec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {
if (sigma <= .5) return texture(tex, uv);
int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));
float twoSigma2 = 2.0 * sigma * sigma;
float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);
vec4 sum = samplePremultiplied(tex, uv) * gaussianNorm;
float weightSum = gaussianNorm;
for (int i = 1; i <= MAX_RADIUS; i++) {
if (i > radius) break;
float x = float(i);
float w = exp(-(x * x) / twoSigma2) * gaussianNorm;
vec2 offset = dir * texelSize * x;
vec4 s1 = samplePremultiplied(tex, uv + offset);
vec4 s2 = samplePremultiplied(tex, uv - offset);
sum += (s1 + s2) * w;
weightSum += 2.0 * w;
}
vec4 result = sum / weightSum;
if (result.a > 0.) {
result.rgb /= result.a;
}
return result;
}
vec2 rotateAspect(vec2 p, float a, float aspect) {
p.x *= aspect;
p = rotate(p, a);
p.x /= aspect;
return p;
}
float smoothFract(float x) {
float f = fract(x);
float w = fwidth(x);
float edge = abs(f - 0.5) - 0.5;
float band = smoothstep(-w, w, edge);
return mix(f, 1.0 - f, band);
}
void main() {
float patternRotation = -u_angle * PI / 180.;
float patternSize = mix(200., 5., u_size);
vec2 uv = v_imageUV;
vec2 uvMask = gl_FragCoord.xy / u_resolution.xy;
vec2 sw = vec2(.005);
vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom);
float mask =
smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) *
smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) *
smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) *
smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y);
float maskOuter =
smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) *
smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) *
smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) *
smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y);
float maskStroke = maskOuter - mask;
float maskInner =
smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) *
smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) *
smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) *
smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y);
float maskStrokeInner = maskInner - mask;
uv -= .5;
uv *= patternSize;
uv = rotateAspect(uv, patternRotation, u_imageAspectRatio);
float curve = 0.;
float patternY = uv.y / u_imageAspectRatio;
if (u_shape > 4.5) {
// pattern
curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY);
} else if (u_shape > 3.5) {
// zigzag
curve = 10. * abs(fract(.1 * patternY) - .5);
} else if (u_shape > 2.5) {
// wave
curve = 4. * sin(.23 * patternY);
} else if (u_shape > 1.5) {
// lines irregular
curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);
} else {
// lines
}
vec2 UvToFract = uv + curve;
vec2 fractOrigUV = fract(uv);
vec2 floorOrigUV = floor(uv);
float x = smoothFract(UvToFract.x);
float xNonSmooth = fract(UvToFract.x) + .0001;
float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x));
highlightsWidth += 2. * maskStrokeInner;
float highlights = smoothstep(0., highlightsWidth, xNonSmooth);
highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth);
highlights = 1. - highlights;
highlights *= u_highlights;
highlights = clamp(highlights, 0., 1.);
highlights *= mask;
float shadows = pow(x, 1.3);
float distortion = 0.;
float fadeX = 1.;
float frameFade = 0.;
float aa = fwidth(xNonSmooth);
aa = max(aa, fwidth(uv.x));
aa = max(aa, fwidth(UvToFract.x));
aa = max(aa, .0001);
if (u_distortionShape == 1.) {
distortion = -pow(1.5 * x, 3.);
distortion += (.5 - u_shift);
frameFade = pow(1.5 * x, 3.);
aa = max(.2, aa);
aa += mix(.2, 0., u_size);
fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
distortion = mix(.5, distortion, fadeX);
} else if (u_distortionShape == 2.) {
distortion = 2. * pow(x, 2.);
distortion -= (.5 + u_shift);
frameFade = pow(abs(x - .5), 4.);
aa = max(.2, aa);
aa += mix(.2, 0., u_size);
fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
distortion = mix(.5, distortion, fadeX);
frameFade = mix(1., frameFade, .5 * fadeX);
} else if (u_distortionShape == 3.) {
distortion = pow(2. * (xNonSmooth - .5), 6.);
distortion -= .25;
distortion -= u_shift;
frameFade = 1. - 2. * pow(abs(x - .4), 2.);
aa = .15;
aa += mix(.1, 0., u_size);
fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
frameFade = mix(1., frameFade, fadeX);
} else if (u_distortionShape == 4.) {
x = xNonSmooth;
distortion = sin((x + .25) * TWO_PI);
shadows = .5 + .5 * asin(distortion) / (.5 * PI);
distortion *= .5;
distortion -= u_shift;
frameFade = .5 + .5 * sin(x * TWO_PI);
} else if (u_distortionShape == 5.) {
distortion -= pow(abs(x), .2) * x;
distortion += .33;
distortion -= 3. * u_shift;
distortion *= .33;
frameFade = .3 * (smoothstep(.0, 1., x));
shadows = pow(x, 2.5);
aa = max(.1, aa);
aa += mix(.1, 0., u_size);
fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
distortion *= fadeX;
}
vec2 dudx = dFdx(v_imageUV);
vec2 dudy = dFdy(v_imageUV);
vec2 grainUV = v_imageUV - .5;
grainUV *= (.8 / vec2(length(dudx), length(dudy)));
grainUV += .5;
if (u_grainMixer > 0.) {
float grain = valueNoise(grainUV);
grain = smoothstep(.4, .7, grain);
grain *= u_grainMixer;
distortion = mix(distortion, 0., grain);
}
shadows = min(shadows, 1.);
shadows += maskStrokeInner;
shadows *= mask;
shadows = min(shadows, 1.);
shadows *= pow(u_shadows, 2.);
shadows = clamp(shadows, 0., 1.);
distortion *= 3. * u_distortion;
frameFade *= u_distortion;
fractOrigUV.x += distortion;
floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, u_imageAspectRatio);
fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, u_imageAspectRatio);
uv = (floorOrigUV + fractOrigUV) / patternSize;
uv += pow(maskStroke, 4.);
uv += vec2(.5);
uv = mix(v_imageUV, uv, smoothstep(0., .7, mask));
float blur = mix(0., 50., u_blur);
blur = mix(0., blur, smoothstep(.5, 1., mask));
float edgeDistortion = mix(.0, .04, u_edges);
edgeDistortion += .06 * frameFade * u_edges;
edgeDistortion *= mask;
float frame = getUvFrame(uv, edgeDistortion);
float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth);
stretch = pow(stretch, 2.);
stretch *= mask;
stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade);
uv.y = mix(uv.y, .5, u_stretch * stretch);
vec4 image = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);
image.rgb *= image.a;
vec4 backColor = u_colorBack;
backColor.rgb *= backColor.a;
vec4 highlightColor = u_colorHighlight;
highlightColor.rgb *= highlightColor.a;
vec4 shadowColor = u_colorShadow;
vec3 color = highlightColor.rgb * highlights;
float opacity = highlightColor.a * highlights;
shadows = mix(shadows * shadowColor.a, 0., highlights);
color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows);
color += .5 * pow(shadows, .5) * shadowColor.rgb;
opacity += shadows;
color = clamp(color, vec3(0.), vec3(1.));
opacity = clamp(opacity, 0., 1.);
color += image.rgb * (1. - opacity) * frame;
opacity += image.a * (1. - opacity) * frame;
color += backColor.rgb * (1. - opacity);
opacity += backColor.a * (1. - opacity);
if (u_grainOverlay > 0.) {
float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
grainOverlay = pow(grainOverlay, 1.3);
float grainOverlayV = grainOverlay * 2. - 1.;
vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
grainOverlayStrength = pow(grainOverlayStrength, .8);
grainOverlayStrength *= mask;
color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
opacity += .5 * grainOverlayStrength;
}
opacity = clamp(opacity, 0., 1.);
fragColor = vec4(color, opacity);
}
`;
export interface FlutedGlassUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string | undefined;
u_colorBack: [number, number, number, number];
u_colorShadow: [number, number, number, number];
u_colorHighlight: [number, number, number, number];
u_shadows: number;
u_size: number;
u_angle: number;
u_distortion: number;
u_shift: number;
u_blur: number;
u_edges: number;
u_marginLeft: number;
u_marginRight: number;
u_marginTop: number;
u_marginBottom: number;
u_stretch: number;
u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];
u_highlights: number;
u_shape: (typeof GlassGridShapes)[GlassGridShape];
u_grainMixer: number;
u_grainOverlay: number;
}
export interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {
image?: HTMLImageElement | string;
colorBack?: string;
colorShadow?: string;
colorHighlight?: string;
shadows?: number;
size?: number;
angle?: number;
distortion?: number;
shift?: number;
blur?: number;
edges?: number;
margin?: number;
marginLeft?: number;
marginRight?: number;
marginTop?: number;
marginBottom?: number;
stretch?: number;
distortionShape?: GlassDistortionShape;
highlights?: number;
shape?: GlassGridShape;
grainMixer?: number;
grainOverlay?: number;
}
export const GlassGridShapes = {
lines: 1,
linesIrregular: 2,
wave: 3,
zigzag: 4,
pattern: 5,
} as const;
export const GlassDistortionShapes = {
prism: 1,
lens: 2,
contour: 3,
cascade: 4,
flat: 5,
} as const;
export type GlassDistortionShape = keyof typeof GlassDistortionShapes;
export type GlassGridShape = keyof typeof GlassGridShapes;
packages/shaders/src/shaders/gem-smoke.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';
import { rotation2, declarePI } from '../shader-utils.js';
export const gemSmokeMeta = {
maxColorCount: 6,
} as const;
/**
* Animated color fields placed over uploaded logo shape; gives the illusion of smoky noise
* behind the glassy shape.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_image (sampler2D): Pre-processed source image texture (R = edge gradient, G = alpha)
* - u_colors (vec4[]): Up to 6 smoke colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_colorBack (vec4): Background color in RGBA
* - u_innerDistortion (float): Power of smoke distortion inside the input shape, needs innerGlow > 0 (0 to 1)
* - u_outerDistortion (float): Power of smoke distortion outside the input shape, needs outerGlow > 0 (0 to 1)
* - u_outerGlow (float): Visibility of smoke shape outside the input shape (0 to 1)
* - u_innerGlow (float): Visibility of smoke shape inside the input shape (0 to 1)
* - u_colorInner (vec4): Additional color inside the input shape, mixing with smoke (RGBA)
* - u_offset (float): Vertical offset of smoke inside the shape, needs innerGlow > 0 (-1 to 1)
* - u_angle (float): Smoke direction in degrees (0 to 360)
* - u_size (float): Size of smoke shape relative to the image box (0 to 1)
* - u_shape (float): Predefined shape mask, needs no image (0 = none, 1 = circle, 2 = daisy, 3 = diamond, 4 = metaballs)
* - u_isImage (bool): Whether an image mask is provided; when true, u_shape is ignored
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
* - v_objectUV (vec2): Normalized UV coordinates with scale, rotation, and offset applied
* - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio (used by the 'none' shape)
* - v_responsiveBoxGivenSize (vec2): Given size of the responsive bounding box (used by the 'none' shape)
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const gemSmokeFragmentShader: string = `#version 300 es
precision mediump float;
in mediump vec2 v_imageUV;
in mediump vec2 v_objectUV;
in mediump vec2 v_responsiveUV;
in mediump vec2 v_responsiveBoxGivenSize;
out vec4 fragColor;
uniform sampler2D u_image;
uniform float u_shape;
uniform bool u_isImage;
uniform float u_time;
uniform vec4 u_colors[${gemSmokeMeta.maxColorCount}];
uniform float u_colorsCount;
uniform vec4 u_colorBack;
uniform vec4 u_colorInner;
uniform float u_innerDistortion;
uniform float u_outerDistortion;
uniform float u_outerGlow;
uniform float u_innerGlow;
uniform float u_offset;
uniform float u_angle;
uniform float u_size;
${declarePI}
${rotation2}
// 9x9 Gaussian blur on R and G channels
vec2 gaussBlur9x9RG(sampler2D tex, vec2 uv, float radius) {
vec2 texel = 1.0 / vec2(textureSize(tex, 0));
vec2 r = max(radius, 0.0) * texel;
// Pascal's row 8: sum = 256, 2D norm = 65536
const float k[9] = float[9](1.0, 8.0, 28.0, 56.0, 70.0, 56.0, 28.0, 8.0, 1.0);
vec2 sum = vec2(0.0);
for (int j = -4; j <= 4; ++j) {
float wy = k[j + 4];
for (int i = -4; i <= 4; ++i) {
float w = k[i + 4] * wy;
vec2 off = vec2(float(i) * r.x, float(j) * r.y);
sum += w * texture(tex, uv + off).rg;
}
}
return sum / 65536.0;
}
float sst(float a, float b, float x) {
return smoothstep(a, b, x);
}
void main() {
float time = u_time;
float roundness = 0.;
float imgAlpha = 0.;
if (u_isImage == true) {
// Image sampling (UV scaled inward to account for padding)
vec2 imageUV = v_imageUV;
imageUV -= .5;
imageUV *= .95;
imageUV += .5;
// Blurred image: x = roundness, y = alpha
vec2 blurred = gaussBlur9x9RG(u_image, imageUV, 10.);
roundness = 1. - blurred.x;
vec2 texelA = 1.0 / vec2(textureSize(u_image, 0));
const float k3[3] = float[3](1.0, 2.0, 1.0);
for (int j = -1; j <= 1; ++j) {
for (int i = -1; i <= 1; ++i) {
imgAlpha += k3[i + 1] * k3[j + 1] * texture(u_image, imageUV + vec2(float(i) * texelA.x, float(j) * texelA.y)).g;
}
}
imgAlpha /= 16.0;
} else {
vec2 uv = v_objectUV + .5;
uv.y = 1. - uv.y;
float edge = 0.;
if (u_shape < 1.) {
// full-fill on canvas
vec2 borderUV = v_responsiveUV + .5;
vec2 mask = min(borderUV, 1. - borderUV);
vec2 pixel_thickness = min(250. / v_responsiveBoxGivenSize, vec2(.5));
float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
maskX = pow(maskX, .25);
maskY = pow(maskY, .25);
edge = clamp(1. - maskX * maskY, 0., 1.);
} else if (u_shape < 2.) {
// circle
vec2 shapeUV = uv - .5;
shapeUV *= .67;
edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);
} else if (u_shape < 3.) {
// daisy
vec2 shapeUV = uv - .5;
shapeUV *= 1.68;
float r = length(shapeUV) * 2.;
float a = atan(shapeUV.y, shapeUV.x) + .2;
r *= (1. + .05 * sin(3. * a + 2. * time));
float f = abs(cos(a * 3.));
edge = smoothstep(f, f + .7, r);
edge *= edge;
} else if (u_shape < 4.) {
// diamond
vec2 shapeUV = uv - .5;
shapeUV = rotate(shapeUV, .25 * PI);
shapeUV *= 1.42;
shapeUV += .5;
vec2 mask = min(shapeUV, 1. - shapeUV);
vec2 pixel_thickness = vec2(.15);
float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
maskX = pow(maskX, .25);
maskY = pow(maskY, .25);
edge = clamp(1. - maskX * maskY, 0., 1.);
} else if (u_shape < 5.) {
// metaballs
vec2 shapeUV = uv - .5;
shapeUV *= 1.3;
edge = 0.;
for (int i = 0; i < 5; i++) {
float fi = float(i);
float speed = 1.5 + 2./3. * sin(fi * 12.345);
float angle = -fi * 1.5;
vec2 dir1 = vec2(cos(angle), sin(angle));
vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));
vec2 traj = .4 * (dir1 * sin(time * speed + fi * 1.23) + dir2 * cos(time * (speed * 0.7) + fi * 2.17));
float d = length(shapeUV + traj);
edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
}
edge = 1. - smoothstep(.65, .9, edge);
edge = pow(edge, 4.);
}
imgAlpha = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);
roundness = 1. - edge;
}
// Smoke UV setup
vec2 smokeUV = v_objectUV;
smokeUV = rotate(smokeUV, u_angle * PI / 180.);
smokeUV *= mix(4., 1., u_size);
// Two swirl paths: inner (shape-masked) and outer (free), each with independent distortion
vec2 innerUV = smokeUV;
vec2 outerUV = smokeUV;
// Vertical displacement — applied independently to inner and outer
innerUV.y += u_innerDistortion * (1. - sst(0., 1., length(.4 * innerUV)));
innerUV.y -= .4 * u_innerDistortion;
innerUV.y += .7 * u_offset * roundness;
outerUV.y += u_outerDistortion * (1. - sst(0., 1., length(.4 * outerUV)));
outerUV.y -= .4 * u_outerDistortion;
float innerSwirl = u_innerDistortion * roundness;
float outerSwirl = u_outerDistortion;
for (int i = 1; i < 5; i++) {
float fi = float(i);
float stretchIn = max(length(dFdx(innerUV)), length(dFdy(innerUV)));
float dampenIn = 1. / (1. + stretchIn * 8.);
float sIn = innerSwirl * dampenIn;
innerUV.x += sIn / fi * cos(time + fi * 2.9 * innerUV.y);
innerUV.y += sIn / fi * cos(time + fi * 1.5 * innerUV.x);
float stretchOut = max(length(dFdx(outerUV)), length(dFdy(outerUV)));
float dampenOut = 1. / (1. + stretchOut * 8.);
float sOut = outerSwirl * dampenOut;
outerUV.x += sOut / fi * cos(time + fi * 2.9 * outerUV.y);
outerUV.y += sOut / fi * cos(time + fi * 1.5 * outerUV.x);
}
// Smoke shapes from swirl fields
float innerShape = exp(-1.5 * dot(innerUV, innerUV));
float outerShape = exp(-1.5 * dot(outerUV, outerUV));
// Visibility masks
float outerMask = pow(u_outerGlow, 2.) * (1. - imgAlpha);
float innerMask = (.01 + .99 * u_innerGlow) * imgAlpha;
innerShape *= innerMask;
outerShape *= outerMask;
// Color gradient
float mixer = (innerShape + outerShape) * u_colorsCount;
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
float smokeMask = 0.;
for (int i = 1; i < ${gemSmokeMeta.maxColorCount + 1}; i++) {
if (i > int(u_colorsCount)) break;
float m = sst(0., 1., clamp(mixer - float(i - 1), 0., 1.));
if (i == 1) smokeMask = m;
vec4 c = u_colors[i - 1];
c.rgb *= c.a;
gradient = mix(gradient, c, m);
}
// Compositing (premultiplied alpha, front-to-back)
vec3 color = gradient.rgb * smokeMask;
float opacity = gradient.a * smokeMask;
float innerOpacity = u_colorInner.a * imgAlpha;
vec3 innerColor = u_colorInner.rgb * innerOpacity;
color += innerColor * (1.0 - opacity);
opacity += innerOpacity * (1.0 - opacity);
vec3 backColor = u_colorBack.rgb * u_colorBack.a;
color += backColor * (1.0 - opacity);
opacity += u_colorBack.a * (1.0 - opacity);
fragColor = vec4(color, opacity);
}
`;
// Configuration for Poisson solver
export const POISSON_CONFIG_OPTIMIZED = {
measurePerformance: false, // Set to true to see performance metrics
workingSize: 512, // Size to solve Poisson at (will upscale to original size)
iterations: 32, // SOR converges ~2-20x faster than standard Gauss-Seidel
};
// Precomputed pixel data for sparse processing
interface SparsePixelData {
interiorPixels: Uint32Array; // Indices of interior pixels
boundaryPixels: Uint32Array; // Indices of boundary pixels
pixelCount: number;
// Neighbor indices for each interior pixel (4 neighbors per pixel)
// Layout: [east, west, north, south] for each pixel
neighborIndices: Int32Array;
}
export function toProcessedGemSmoke(file: File | string): Promise<{ imageData: ImageData; pngBlob: Blob }> {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const isBlob = typeof file === 'string' && file.startsWith('blob:');
return new Promise((resolve, reject) => {
if (!file || !ctx) {
reject(new Error('Invalid file or canvas context'));
return;
}
const blobContentTypePromise = isBlob && fetch(file).then((res) => res.headers.get('Content-Type'));
const img = new Image();
img.crossOrigin = 'anonymous';
const totalStartTime = performance.now();
img.onload = async () => {
// Force SVG to load at a high fidelity size if it's an SVG
let isSVG;
const blobContentType = await blobContentTypePromise;
if (blobContentType) {
isSVG = blobContentType === 'image/svg+xml';
} else if (typeof file === 'string') {
isSVG = file.endsWith('.svg') || file.startsWith('data:image/svg+xml');
} else {
isSVG = file.type === 'image/svg+xml';
}
let originalWidth = img.width || img.naturalWidth;
let originalHeight = img.height || img.naturalHeight;
if (isSVG) {
// Scale SVG to max dimension while preserving aspect ratio
const svgMaxSize = 4096;
const aspectRatio = originalWidth / originalHeight;
if (originalWidth > originalHeight) {
originalWidth = svgMaxSize;
originalHeight = svgMaxSize / aspectRatio;
} else {
originalHeight = svgMaxSize;
originalWidth = svgMaxSize * aspectRatio;
}
img.width = originalWidth;
img.height = originalHeight;
}
// Always scale to working resolution for consistency
const minDimension = Math.min(originalWidth, originalHeight);
const targetSize = POISSON_CONFIG_OPTIMIZED.workingSize;
// Calculate scale to fit within workingSize
const scaleFactor = targetSize / minDimension;
const width = Math.round(originalWidth * scaleFactor);
const height = Math.round(originalHeight * scaleFactor);
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
console.log(`[Processing Mode]`);
console.log(` Original: ${originalWidth}×${originalHeight}`);
console.log(` Working: ${width}×${height} (${(scaleFactor * 100).toFixed(1)}% scale)`);
if (scaleFactor < 1) {
console.log(` Speedup: ~${Math.round(1 / (scaleFactor * scaleFactor))}×`);
}
}
canvas.width = originalWidth;
canvas.height = originalHeight;
const paddingSize = 0.025;
const padX = Math.ceil(width * paddingSize);
const padY = Math.ceil(height * paddingSize);
const imgW = width - 2 * padX;
const imgH = height - 2 * padY;
// ── 1. Shape canvas (working res): image centered with padding ──
const shapeCanvas = document.createElement('canvas');
shapeCanvas.width = width;
shapeCanvas.height = height;
const shapeCtx = shapeCanvas.getContext('2d')!;
shapeCtx.drawImage(img, padX, padY, imgW, imgH);
// 1) Build optimized masks using TypedArrays
const startMask = performance.now();
const shapeImageData = shapeCtx.getImageData(0, 0, width, height);
const data = shapeImageData.data;
// Use Uint8Array for masks (1 byte per pixel vs 8+ bytes for boolean array)
const shapeMask = new Uint8Array(width * height);
const boundaryMask = new Uint8Array(width * height);
// First pass: identify shape pixels
let shapePixelCount = 0;
for (let i = 0, idx = 0; i < data.length; i += 4, idx++) {
const a = data[i + 3];
const isShape = a === 0 ? 0 : 1;
shapeMask[idx] = isShape;
shapePixelCount += isShape;
}
// 2) Optimized boundary detection using sparse approach
// Only check shape pixels, not all pixels
const boundaryIndices: number[] = [];
const interiorIndices: number[] = [];
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const idx = y * width + x;
if (!shapeMask[idx]) continue;
// Check if pixel is on boundary (optimized: early exit)
let isBoundary = false;
// Check 4-connected neighbors first (most common case)
if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
isBoundary = true;
} else {
// Check all 8 neighbors (including diagonals) for comprehensive boundary detection
isBoundary =
!shapeMask[idx - 1] || // left
!shapeMask[idx + 1] || // right
!shapeMask[idx - width] || // top
!shapeMask[idx + width] || // bottom
!shapeMask[idx - width - 1] || // top-left
!shapeMask[idx - width + 1] || // top-right
!shapeMask[idx + width - 1] || // bottom-left
!shapeMask[idx + width + 1]; // bottom-right
}
if (isBoundary) {
boundaryMask[idx] = 1;
boundaryIndices.push(idx);
} else {
interiorIndices.push(idx);
}
}
}
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
console.log(`[Mask Building] Time: ${(performance.now() - startMask).toFixed(2)}ms`);
console.log(
` Shape pixels: ${shapePixelCount} / ${width * height} (${((shapePixelCount / (width * height)) * 100).toFixed(1)}%)`
);
console.log(` Interior pixels: ${interiorIndices.length}`);
console.log(` Boundary pixels: ${boundaryIndices.length}`);
}
// 3) Precompute sparse data structure for solver
const sparseData = buildSparseData(
shapeMask,
boundaryMask,
new Uint32Array(interiorIndices),
new Uint32Array(boundaryIndices),
width,
height
);
// 4) Solve Poisson equation with optimized sparse solver
const startSolve = performance.now();
const u = solvePoissonSparse(sparseData, shapeMask, boundaryMask, width, height);
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
console.log(`[Poisson Solve] Time: ${(performance.now() - startSolve).toFixed(2)}ms`);
}
// 5) Generate output image
let maxVal = 0;
let finalImageData: ImageData;
// Only check shape pixels for max value
for (let i = 0; i < interiorIndices.length; i++) {
const idx = interiorIndices[i]!;
if (u[idx]! > maxVal) maxVal = u[idx]!;
}
// Create roundness image at working resolution
const tempCanvas = document.createElement('canvas');
tempCanvas.width = width;
tempCanvas.height = height;
const tempCtx = tempCanvas.getContext('2d')!;
const tempImg = tempCtx.createImageData(width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const idx = y * width + x;
const px = idx * 4;
if (!shapeMask[idx]) {
tempImg.data[px] = 255;
tempImg.data[px + 1] = 255;
tempImg.data[px + 2] = 255;
tempImg.data[px + 3] = 0; // Alpha = 0 for background
} else {
const poissonRatio = u[idx]! / maxVal;
let gray = 255 * (1 - poissonRatio);
tempImg.data[px] = gray;
tempImg.data[px + 1] = gray;
tempImg.data[px + 2] = gray;
tempImg.data[px + 3] = 255; // Alpha = 255 for shape
}
}
}
tempCtx.putImageData(tempImg, 0, 0);
// Upscale to original resolution with smooth interpolation
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(tempCanvas, 0, 0, width, height, 0, 0, originalWidth, originalHeight);
// Now get the upscaled image data for final output
const outImg = ctx.getImageData(0, 0, originalWidth, originalHeight);
// Re-apply edges from original resolution with anti-aliasing
// This ensures edges are pixel-perfect while roundness is smooth
const origPadX = Math.ceil(originalWidth * paddingSize);
const origPadY = Math.ceil(originalHeight * paddingSize);
const originalCanvas = document.createElement('canvas');
originalCanvas.width = originalWidth;
originalCanvas.height = originalHeight;
const originalCtx = originalCanvas.getContext('2d')!;
originalCtx.drawImage(img, origPadX, origPadY, originalWidth - 2 * origPadX, originalHeight - 2 * origPadY);
const originalData = originalCtx.getImageData(0, 0, originalWidth, originalHeight);
// Process each pixel: Red channel = roundness, Alpha channel = original alpha
for (let i = 0; i < outImg.data.length; i += 4) {
const a = originalData.data[i + 3]!;
// Use only alpha to determine background vs shape
const upscaledAlpha = outImg.data[i + 3]!;
if (a === 0) {
// Background pixel
outImg.data[i] = 255;
outImg.data[i + 1] = 0;
} else {
// Red channel carries the roundness
// Check if upscale missed this pixel by looking at alpha channel
// If upscaled alpha is 0, the low-res version thought this was background
outImg.data[i] = upscaledAlpha === 0 ? 0 : outImg.data[i]!; // roundness or 0
outImg.data[i + 1] = a; // original alpha
}
// Unused channels fixed
outImg.data[i + 2] = 255;
outImg.data[i + 3] = 255;
}
ctx.putImageData(outImg, 0, 0);
finalImageData = outImg;
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error('Failed to create PNG blob'));
return;
}
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
const totalTime = performance.now() - totalStartTime;
console.log(`[Total Processing Time] ${totalTime.toFixed(2)}ms`);
if (scaleFactor < 1) {
const estimatedFullResTime = totalTime * Math.pow((originalWidth * originalHeight) / (width * height), 1.5);
console.log(`[Estimated time at full resolution] ~${estimatedFullResTime.toFixed(0)}ms`);
console.log(
`[Time saved] ~${(estimatedFullResTime - totalTime).toFixed(0)}ms (${Math.round(estimatedFullResTime / totalTime)}× faster)`
);
}
}
resolve({
imageData: finalImageData,
pngBlob: blob,
});
}, 'image/png');
};
img.onerror = () => reject(new Error('Failed to load image'));
img.src = typeof file === 'string' ? file : URL.createObjectURL(file);
});
}
function buildSparseData(
shapeMask: Uint8Array,
boundaryMask: Uint8Array,
interiorPixels: Uint32Array,
boundaryPixels: Uint32Array,
width: number,
height: number
): SparsePixelData {
const pixelCount = interiorPixels.length;
// Build neighbor indices for sparse processing
// For each interior pixel, store indices of its 4 neighbors
// Use -1 for out-of-bounds or non-shape neighbors
const neighborIndices = new Int32Array(pixelCount * 4);
for (let i = 0; i < pixelCount; i++) {
const idx = interiorPixels[i]!;
const x = idx % width;
const y = Math.floor(idx / width);
// East neighbor
neighborIndices[i * 4 + 0] = x < width - 1 && shapeMask[idx + 1] ? idx + 1 : -1;
// West neighbor
neighborIndices[i * 4 + 1] = x > 0 && shapeMask[idx - 1] ? idx - 1 : -1;
// North neighbor
neighborIndices[i * 4 + 2] = y > 0 && shapeMask[idx - width] ? idx - width : -1;
// South neighbor
neighborIndices[i * 4 + 3] = y < height - 1 && shapeMask[idx + width] ? idx + width : -1;
}
return {
interiorPixels,
boundaryPixels,
pixelCount,
neighborIndices,
};
}
function solvePoissonSparse(
sparseData: SparsePixelData,
shapeMask: Uint8Array,
boundaryMask: Uint8Array,
width: number,
height: number
): Float32Array {
// This controls how smooth the falloff roundness will be and extend into the shape
const ITERATIONS = POISSON_CONFIG_OPTIMIZED.iterations;
// Keep C constant - only iterations control roundness spread
const C = 0.01;
const u = new Float32Array(width * height);
const { interiorPixels, neighborIndices, pixelCount } = sparseData;
// Performance tracking
const startTime = performance.now();
// Red-Black SOR for better symmetry with fewer iterations
// omega between 1.8-1.95 typically gives best convergence for Poisson
const omega = 1.9;
// Pre-classify pixels as red or black for efficient processing
const redPixels: number[] = [];
const blackPixels: number[] = [];
for (let i = 0; i < pixelCount; i++) {
const idx = interiorPixels[i]!;
const x = idx % width;
const y = Math.floor(idx / width);
if ((x + y) % 2 === 0) {
redPixels.push(i);
} else {
blackPixels.push(i);
}
}
for (let iter = 0; iter < ITERATIONS; iter++) {
// Red pass: update red pixels
for (const i of redPixels) {
const idx = interiorPixels[i]!;
// Get precomputed neighbor indices
const eastIdx = neighborIndices[i * 4 + 0]!;
const westIdx = neighborIndices[i * 4 + 1]!;
const northIdx = neighborIndices[i * 4 + 2]!;
const southIdx = neighborIndices[i * 4 + 3]!;
// Sum neighbors (use 0 for out-of-bounds)
let sumN = 0;
if (eastIdx >= 0) sumN += u[eastIdx]!;
if (westIdx >= 0) sumN += u[westIdx]!;
if (northIdx >= 0) sumN += u[northIdx]!;
if (southIdx >= 0) sumN += u[southIdx]!;
// SOR update: blend new value with old value
const newValue = (C + sumN) / 4;
u[idx] = omega * newValue + (1 - omega) * u[idx]!;
}
// Black pass: update black pixels
for (const i of blackPixels) {
const idx = interiorPixels[i]!;
// Get precomputed neighbor indices
const eastIdx = neighborIndices[i * 4 + 0]!;
const westIdx = neighborIndices[i * 4 + 1]!;
const northIdx = neighborIndices[i * 4 + 2]!;
const southIdx = neighborIndices[i * 4 + 3]!;
// Sum neighbors (use 0 for out-of-bounds)
let sumN = 0;
if (eastIdx >= 0) sumN += u[eastIdx]!;
if (westIdx >= 0) sumN += u[westIdx]!;
if (northIdx >= 0) sumN += u[northIdx]!;
if (southIdx >= 0) sumN += u[southIdx]!;
// SOR update: blend new value with old value
const newValue = (C + sumN) / 4;
u[idx] = omega * newValue + (1 - omega) * u[idx]!;
}
}
// Jacobi smoothing passes to remove Red-Black checkerboard artifacts
const tmp = new Float32Array(width * height);
for (let smooth = 0; smooth < 3; smooth++) {
tmp.set(u);
for (let i = 0; i < pixelCount; i++) {
const idx = interiorPixels[i]!;
const eastIdx = neighborIndices[i * 4 + 0]!;
const westIdx = neighborIndices[i * 4 + 1]!;
const northIdx = neighborIndices[i * 4 + 2]!;
const southIdx = neighborIndices[i * 4 + 3]!;
let sum = 0;
let count = 0;
if (eastIdx >= 0) { sum += tmp[eastIdx]!; count++; }
if (westIdx >= 0) { sum += tmp[westIdx]!; count++; }
if (northIdx >= 0) { sum += tmp[northIdx]!; count++; }
if (southIdx >= 0) { sum += tmp[southIdx]!; count++; }
u[idx] = count > 0 ? (tmp[idx]! + sum / count) * 0.5 : tmp[idx]!;
}
}
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
const elapsed = performance.now() - startTime;
console.log(`[Optimized Poisson Solver (SOR ω=${omega})]`);
console.log(` Working size: ${width}×${height}`);
console.log(` Iterations: ${ITERATIONS}`);
console.log(` Time: ${elapsed.toFixed(2)}ms`);
console.log(` Interior pixels processed: ${pixelCount}`);
console.log(` Speed: ${((ITERATIONS * pixelCount) / (elapsed * 1000)).toFixed(2)} Mpixels/sec`);
}
return u;
}
export interface GemSmokeUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_image: HTMLImageElement | string | undefined;
u_innerDistortion: number;
u_outerDistortion: number;
u_outerGlow: number;
u_innerGlow: number;
u_colorInner: [number, number, number, number];
u_offset: number;
u_angle: number;
u_size: number;
u_shape: (typeof GemSmokeShapes)[GemSmokeShape];
u_isImage: boolean;
}
export interface GemSmokeParams extends ShaderSizingParams, ShaderMotionParams {
colors?: string[];
colorBack?: string;
image?: HTMLImageElement | string | undefined;
innerDistortion?: number;
outerDistortion?: number;
outerGlow?: number;
innerGlow?: number;
colorInner?: string;
offset?: number;
angle?: number;
size?: number;
shape?: GemSmokeShape;
}
export const GemSmokeShapes = {
none: 0,
circle: 1,
daisy: 2,
diamond: 3,
metaballs: 4,
} as const;
export type GemSmokeShape = keyof typeof GemSmokeShapes;
packages/shaders/src/shaders/god-rays.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, rotation2, textureRandomizerR, colorBandingFix, proceduralHash11 } from '../shader-utils.js';
export const godRaysMeta = {
maxColorCount: 5,
} as const;
/**
* Animated rays of light radiating from the center, blended with up to 5 colors.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorBack (vec4): Background color in RGBA
* - u_colorBloom (vec4): Color overlay blended with the rays in RGBA, needs bloom > 0
* - u_colors (vec4[]): Up to 5 ray colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_bloom (float): Strength of the bloom/overlay effect, 0 = alpha blend, 1 = additive blend (0 to 1)
* - u_intensity (float): Visibility/strength of the rays (0 to 1)
* - u_density (float): The number of rays (0 to 1)
* - u_spotty (float): The length of the rays, higher = more spots/shorter rays (0 to 1)
* - u_midSize (float): Size of the circular glow shape in the center, needs midIntensity > 0 (0 to 1)
* - u_midIntensity (float): Brightness/intensity of the central glow, needs midSize > 0 (0 to 1)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* The rays are adjustable by size, density, brightness and center glow.
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const godRaysFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform sampler2D u_noiseTexture;
uniform vec4 u_colorBack;
uniform vec4 u_colorBloom;
uniform vec4 u_colors[${ godRaysMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_density;
uniform float u_spotty;
uniform float u_midSize;
uniform float u_midIntensity;
uniform float u_intensity;
uniform float u_bloom;
in vec2 v_objectUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ textureRandomizerR }
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = randomR(i);
float b = randomR(i + vec2(1.0, 0.0));
float c = randomR(i + vec2(0.0, 1.0));
float d = randomR(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
${ proceduralHash11 }
float raysShape(vec2 uv, float r, float freq, float intensity, float radius) {
float a = atan(uv.y, uv.x);
vec2 left = vec2(a * freq, r);
vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r);
float n_left = pow(valueNoise(left), intensity);
float n_right = pow(valueNoise(right), intensity);
float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));
return shape;
}
void main() {
vec2 shape_uv = v_objectUV;
float t = .2 * u_time;
float radius = length(shape_uv);
float spots = 6.5 * abs(u_spotty);
float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);
float delta = 1. - smoothstep(0., 1., radius);
float midSize = 10. * abs(u_midSize);
float ms_lo = 0.02 * midSize;
float ms_hi = max(midSize, 1e-6);
float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius));
middleShape = pow(middleShape, 5.0);
vec3 accumColor = vec3(0.0);
float accumAlpha = 0.0;
for (int i = 0; i < ${ godRaysMeta.maxColorCount }; i++) {
if (i >= int(u_colorsCount)) break;
vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);
float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;
float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;
float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);
float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density;
float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);
ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius);
ray += (1. + 4. * ray) * middleShape;
ray = clamp(ray, 0.0, 1.0);
float srcAlpha = u_colors[i].a * ray;
vec3 srcColor = u_colors[i].rgb * srcAlpha;
vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;
float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;
vec3 addBlendColor = accumColor + srcColor;
float addBlendAlpha = accumAlpha + srcAlpha;
accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);
accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);
}
float overlayAlpha = u_colorBloom.a;
vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;
vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;
accumColor = mix(accumColor, colorWithOverlay, u_bloom);
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
vec3 color = accumColor + (1. - accumAlpha) * bgColor;
float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
color = clamp(color, 0., 1.);
opacity = clamp(opacity, 0., 1.);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface GodRaysUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colorBloom: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_spotty: number;
u_midSize: number;
u_midIntensity: number;
u_density: number;
u_intensity: number;
u_bloom: number;
u_noiseTexture?: HTMLImageElement;
}
export interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colorBloom?: string;
colors?: string[];
spotty?: number;
midSize?: number;
midIntensity?: number;
density?: number;
intensity?: number;
bloom?: number;
}
packages/shaders/src/shaders/grain-gradient.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import {
type ShaderSizingParams,
type ShaderSizingUniforms,
} from '../shader-sizing.js';
import {
simplexNoise,
declarePI,
rotation2,
textureRandomizerR,
proceduralHash11,
} from '../shader-utils.js';
export const grainGradientMeta = {
maxColorCount: 7,
} as const;
/**
* Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms.
*
* Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_worldWidth (float): Virtual width of the graphic
* - u_worldHeight (float): Virtual height of the graphic
* - u_fit (float): Fit mode (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level (0.01 to 4)
* - u_rotation (float): Rotation angle in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset (-1 to 1)
* - u_offsetY (float): Vertical offset (-1 to 1)
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 7 gradient colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
* - u_intensity (float): Distortion between color bands (0 to 1)
* - u_noise (float): Grainy noise overlay (0 to 1)
* - u_shape (float): Shape type (1 = wave, 2 = dots, 3 = truchet, 4 = corners, 5 = ripple, 6 = blob, 7 = sphere)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied (used for shapes 4-7)
* - v_objectBoxSize (vec2): Size of the object bounding box in pixels
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for shapes 1-3)
* - v_patternBoxSize (vec2): Size of the pattern bounding box in pixels
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const grainGradientFragmentShader: string = `#version 300 es
precision lowp float;
uniform mediump float u_time;
uniform mediump vec2 u_resolution;
uniform mediump float u_pixelRatio;
uniform sampler2D u_noiseTexture;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ grainGradientMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_softness;
uniform float u_intensity;
uniform float u_noise;
uniform float u_shape;
uniform mediump float u_worldWidth;
uniform mediump float u_worldHeight;
uniform mediump float u_fit;
uniform mediump float u_scale;
uniform mediump float u_rotation;
uniform mediump float u_offsetX;
uniform mediump float u_offsetY;
in vec2 v_objectUV;
in vec2 v_patternUV;
in vec2 v_objectBoxSize;
in vec2 v_patternBoxSize;
out vec4 fragColor;
${ declarePI }
${ simplexNoise }
${ rotation2 }
${ textureRandomizerR }
float valueNoiseR(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = randomR(i);
float b = randomR(i + vec2(1.0, 0.0));
float c = randomR(i + vec2(0.0, 1.0));
float d = randomR(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
vec4 fbmR(vec2 n0, vec2 n1, vec2 n2, vec2 n3) {
float amplitude = 0.2;
vec4 total = vec4(0.);
for (int i = 0; i < 3; i++) {
n0 = rotate(n0, 0.3);
n1 = rotate(n1, 0.3);
n2 = rotate(n2, 0.3);
n3 = rotate(n3, 0.3);
total.x += valueNoiseR(n0) * amplitude;
total.y += valueNoiseR(n1) * amplitude;
total.z += valueNoiseR(n2) * amplitude;
total.z += valueNoiseR(n3) * amplitude;
n0 *= 1.99;
n1 *= 1.99;
n2 *= 1.99;
n3 *= 1.99;
amplitude *= 0.6;
}
return total;
}
${ proceduralHash11 }
vec2 truchet(vec2 uv, float idx){
idx = fract(((idx - .5) * 2.));
if (idx > 0.75) {
uv = vec2(1.0) - uv;
} else if (idx > 0.5) {
uv = vec2(1.0 - uv.x, uv.y);
} else if (idx > 0.25) {
uv = 1.0 - vec2(1.0 - uv.x, uv.y);
}
return uv;
}
void main() {
const float firstFrameOffset = 7.;
float t = .1 * (u_time + firstFrameOffset);
vec2 shape_uv = vec2(0.);
vec2 grain_uv = vec2(0.);
float r = u_rotation * PI / 180.;
float cr = cos(r);
float sr = sin(r);
mat2 graphicRotation = mat2(cr, sr, -sr, cr);
vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
if (u_shape > 3.5) {
shape_uv = v_objectUV;
grain_uv = shape_uv;
// apply inverse transform to grain_uv so it respects the originXY
grain_uv = transpose(graphicRotation) * grain_uv;
grain_uv *= u_scale;
grain_uv -= graphicOffset;
grain_uv *= v_objectBoxSize;
grain_uv *= .7;
} else {
shape_uv = .5 * v_patternUV;
grain_uv = 100. * v_patternUV;
// apply inverse transform to grain_uv so it respects the originXY
grain_uv = transpose(graphicRotation) * grain_uv;
grain_uv *= u_scale;
if (u_fit > 0.) {
vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
vec2 patternBoxGivenSize = vec2(
(u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
(u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
);
patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
}
vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
grain_uv -= graphicOffset / patternBoxScale;
grain_uv *= 1.6;
}
float shape = 0.;
if (u_shape < 1.5) {
// Sine wave
float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));
shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
} else if (u_shape < 2.5) {
// Grid (dots)
float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
float rand = hash11(stripeIdx * 100.);
rand = sign(rand - .5) * pow(4. * abs(rand), .3);
shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);
shape = pow(abs(shape), 4.);
} else if (u_shape < 3.5) {
// Truchet pattern
float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);
shape_uv.x += 10.;
shape_uv *= .6;
vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));
float distance1 = length(tile);
float distance2 = length(tile - vec2(1.));
n2 -= .5;
n2 *= .1;
shape = smoothstep(.2, .55, distance1 + n2) * (1. - smoothstep(.45, .8, distance1 - n2));
shape += smoothstep(.2, .55, distance2 + n2) * (1. - smoothstep(.45, .8, distance2 - n2));
shape = pow(shape, 1.5);
} else if (u_shape < 4.5) {
// Corners
shape_uv *= .6;
vec2 outer = vec2(.5);
vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));
vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
shape = 1. - bl.x * bl.y * tr.x * tr.y;
shape_uv = -shape_uv;
bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));
tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
shape -= bl.x * bl.y * tr.x * tr.y;
shape = 1. - smoothstep(0., 1., shape);
} else if (u_shape < 5.5) {
// Ripple
shape_uv *= 2.;
float dist = length(.4 * shape_uv);
float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;
shape = waves;
} else if (u_shape < 6.5) {
// Blob
t *= 2.;
vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));
vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));
vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));
vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));
shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);
shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);
shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);
shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);
shape = smoothstep(.0, .9, shape);
float edge = smoothstep(.25, .3, shape);
shape = mix(.0, shape, edge);
} else {
// Sphere
shape_uv *= 2.;
float d = 1. - pow(length(shape_uv), 2.);
vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));
vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
shape = .5 + .5 * dot(lightPos, pos);
shape *= step(0., d);
}
float baseNoise = snoise(grain_uv * .5);
vec4 fbmVals = fbmR(
.002 * grain_uv + 10.,
.003 * grain_uv,
.001 * grain_uv,
rotate(.4 * grain_uv, 2.)
);
float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;
float rawNoise = .75 * baseNoise - fbmVals.w - fbmVals.z;
float noise = clamp(rawNoise, 0., 1.);
shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
shape += u_noise * 10. / u_colorsCount * noise;
float aa = fwidth(shape);
shape = clamp(shape - .5 / u_colorsCount, 0., 1.);
float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));
float mixer = shape * (u_colorsCount - 1.);
int cntStop = int(u_colorsCount) - 1;
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
for (int i = 1; i < ${ grainGradientMeta.maxColorCount }; i++) {
if (i > cntStop) break;
float localT = clamp(mixer - float(i - 1), 0., 1.);
localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);
vec4 c = u_colors[i];
c.rgb *= c.a;
gradient = mix(gradient, c, localT);
}
vec3 color = gradient.rgb * totalShape;
float opacity = gradient.a * totalShape;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1.0 - opacity);
opacity = opacity + u_colorBack.a * (1.0 - opacity);
fragColor = vec4(color, opacity);
}
`;
export interface GrainGradientUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_softness: number;
u_intensity: number;
u_noise: number;
u_shape: (typeof GrainGradientShapes)[GrainGradientShape];
u_noiseTexture?: HTMLImageElement;
}
export interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colors?: string[];
softness?: number;
intensity?: number;
noise?: number;
shape?: GrainGradientShape;
}
export const GrainGradientShapes = {
wave: 1,
dots: 2,
truchet: 3,
corners: 4,
ripple: 5,
blob: 6,
sphere: 7,
};
export type GrainGradientShape = keyof typeof GrainGradientShapes;
packages/shaders/src/shaders/halftone-cmyk.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI } from '../shader-utils.js';
/**
* CMYK halftone printing effect applied to images with customizable dot patterns
* and ink colors for each channel (Cyan, Magenta, Yellow, Black).
*
* Fragment shader uniforms:
* - u_image (sampler2D): Source image texture
* - u_imageAspectRatio (float): Aspect ratio of the source image
* - u_colorBack (vec4): Background (paper) color in RGBA
* - u_colorC (vec4): Cyan ink color in RGBA
* - u_colorM (vec4): Magenta ink color in RGBA
* - u_colorY (vec4): Yellow ink color in RGBA
* - u_colorK (vec4): Black ink color in RGBA
* - u_size (float): Halftone cell size (0 to 1)
* - u_contrast (float): Image contrast adjustment (0 to 2)
* - u_softness (float): Edge softness of dots (0 to 1)
* - u_grainSize (float): Size of grain texture, applied to both grain and overlay, needs grainMixer or grainOverlay > 0 (0 to 1)
* - u_grainMixer (float): Strength of grain affecting dot size (0 to 1)
* - u_grainOverlay (float): Strength of grain overlay on final output (0 to 1)
* - u_gridNoise (float): Strength of smooth noise applied to both dot positions and color sampling, positions only with sharp type (0 to 1)
* - u_floodC (float): Flat cyan dot size adjustment applied uniformly, needs colorC alpha > 0 (0 to 1)
* - u_floodM (float): Flat magenta dot size adjustment applied uniformly, needs colorM alpha > 0 (0 to 1)
* - u_floodY (float): Flat yellow dot size adjustment applied uniformly, needs colorY alpha > 0 (0 to 1)
* - u_floodK (float): Flat black dot size adjustment applied uniformly, needs colorK alpha > 0 (0 to 1)
* - u_gainC (float): Proportional cyan dot size gain, needs colorC alpha > 0 (enhances existing dots, -1 to 1)
* - u_gainM (float): Proportional magenta dot size gain, needs colorM alpha > 0 (enhances existing dots, -1 to 1)
* - u_gainY (float): Proportional yellow dot size gain, needs colorY alpha > 0 (enhances existing dots, -1 to 1)
* - u_gainK (float): Proportional black dot size gain, needs colorK alpha > 0 (enhances existing dots, -1 to 1)
* - u_type (float): Dot shape style (0 = dots, 1 = ink, 2 = sharp)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const halftoneCmykFragmentShader: string = `#version 300 es
precision mediump float;
uniform sampler2D u_image;
uniform float u_imageAspectRatio;
uniform vec4 u_colorBack;
uniform vec4 u_colorC;
uniform vec4 u_colorM;
uniform vec4 u_colorY;
uniform vec4 u_colorK;
uniform float u_size;
uniform float u_contrast;
uniform float u_grainSize;
uniform float u_grainMixer;
uniform float u_grainOverlay;
uniform float u_gridNoise;
uniform float u_softness;
uniform float u_floodC;
uniform float u_floodM;
uniform float u_floodY;
uniform float u_floodK;
uniform float u_gainC;
uniform float u_gainM;
uniform float u_gainY;
uniform float u_gainK;
uniform float u_type;
uniform sampler2D u_noiseTexture;
in vec2 v_imageUV;
out vec4 fragColor;
const float shiftC = -.5;
const float shiftM = -.25;
const float shiftY = .2;
const float shiftK = 0.;
// Precomputed sin/cos for rotation angles (15°, 75°, 0°, 45°)
const float cosC = 0.9659258; const float sinC = 0.2588190; // 15°
const float cosM = 0.2588190; const float sinM = 0.9659258; // 75°
const float cosY = 1.0; const float sinY = 0.0; // 0°
const float cosK = 0.7071068; const float sinK = 0.7071068; // 45°
${ declarePI }
vec2 randomRG(vec2 p) {
vec2 uv = floor(p) / 100. + .5;
return texture(u_noiseTexture, fract(uv)).rg;
}
vec3 hash23(vec2 p) {
vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1;
p3 += dot(p3, p3.yzx + 19.19);
return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x));
}
float sst(float edge0, float edge1, float x) {
return smoothstep(edge0, edge1, x);
}
vec3 valueNoise3(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
vec3 a = hash23(i);
vec3 b = hash23(i + vec2(1.0, 0.0));
vec3 c = hash23(i + vec2(0.0, 1.0));
vec3 d = hash23(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
vec3 x1 = mix(a, b, u.x);
vec3 x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
float getUvFrame(vec2 uv, vec2 pad) {
float left = smoothstep(-pad.x, 0., uv.x);
float right = smoothstep(1. + pad.x, 1., uv.x);
float bottom = smoothstep(-pad.y, 0., uv.y);
float top = smoothstep(1. + pad.y, 1., uv.y);
return left * right * bottom * top;
}
vec4 RGBAtoCMYK(vec4 rgba) {
float k = 1. - max(max(rgba.r, rgba.g), rgba.b);
float denom = 1. - k;
vec3 cmy = vec3(0.);
if (denom > 1e-5) {
cmy = (1. - rgba.rgb - vec3(k)) / denom;
}
return vec4(cmy, k) * rgba.a;
}
vec3 applyContrast(vec3 rgb) {
return clamp((rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
}
// Single-component CMYK extractors with contrast built-in, alpha-aware
float getCyan(vec4 rgba) {
vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
float maxRGB = max(max(c.r, c.g), c.b);
return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a;
}
float getMagenta(vec4 rgba) {
vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
float maxRGB = max(max(c.r, c.g), c.b);
return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a;
}
float getYellow(vec4 rgba) {
vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
float maxRGB = max(max(c.r, c.g), c.b);
return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a;
}
float getBlack(vec4 rgba) {
vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
return (1. - max(max(c.r, c.g), c.b)) * rgba.a;
}
vec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) {
vec2 cellCenter = floor(uv) + .5 + cellOffset;
return cellCenter + (randomRG(cellCenter + channelIdx * 50.) - .5) * u_gridNoise;
}
vec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) {
vec2 uvGrid = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift);
return uvGrid * pad + 0.5;
}
void colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, bool isJoined, inout float outMask) {
float dist = length(pos - cellCenter);
float radius = rad;
radius *= (1. + generalComp);
radius += (.15 + channelgain * radius);
radius = max(0., radius);
radius = mix(0., radius, transparency);
radius += channelAddon;
radius *= (1. - grain);
float mask = 1. - sst(0., radius, dist);
if (isJoined) {
// ink or sharp (joined)
mask = pow(mask, 1.2);
} else {
// dots (separate)
mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask);
}
mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness);
outMask += mask;
}
vec3 applyInk(vec3 paper, vec3 inkColor, float cov) {
vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0));
return paper * inkEffect;
}
void main() {
vec2 uv = v_imageUV;
float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7));
float cellSizeY = 1.0 / cellsPerSide;
vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0);
vec2 uvGrid = (uv - .5) / pad;
float insideImageBox = getUvFrame(uv, pad);
float generalComp = .1 * u_softness + .1 * u_gridNoise + .1 * (1. - step(0.5, u_type)) * (1.5 - u_softness);
vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC;
vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM;
vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY;
vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK;
vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
vec2 grainUV = (v_imageUV - .5) * grainSize + .5;
// shared by the grain mixer and the grain overlay, skip it when neither is on
vec3 noiseValues = vec3(0.);
if (u_grainMixer > 0. || u_grainOverlay > 0.) {
noiseValues = valueNoise3(grainUV);
}
float grain = sst(.55, 1., noiseValues.r);
grain *= u_grainMixer;
vec4 outMask = vec4(0.);
bool isJoined = u_type > 0.5;
if (u_type < 1.5) {
// dots or ink: per-cell color sampling
for (int dy = -1; dy <= 1; dy++) {
for (int dx = -1; dx <= 1; dx++) {
vec2 cellOffset = vec2(float(dx), float(dy));
vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.);
vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad));
colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);
vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.);
vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad));
colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);
vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.);
vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad));
colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);
vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.);
vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad));
colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);
}
}
} else {
// sharp: direct px color sampling
vec4 tex = texture(u_image, uv);
tex.rgb = applyContrast(tex.rgb);
insideImageBox *= tex.a;
vec4 cmykOriginal = RGBAtoCMYK(tex);
for (int dy = -1; dy <= 1; dy++) {
for (int dx = -1; dx <= 1; dx++) {
vec2 cellOffset = vec2(float(dx), float(dy));
colorMask(uvC, cellCenterPos(uvC, cellOffset, 0.), cmykOriginal.x, insideImageBox, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);
colorMask(uvM, cellCenterPos(uvM, cellOffset, 1.), cmykOriginal.y, insideImageBox, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);
colorMask(uvY, cellCenterPos(uvY, cellOffset, 2.), cmykOriginal.z, insideImageBox, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);
colorMask(uvK, cellCenterPos(uvK, cellOffset, 3.), cmykOriginal.w, insideImageBox, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);
}
}
}
float shape;
float C = outMask[0];
float M = outMask[1];
float Y = outMask[2];
float K = outMask[3];
if (isJoined) {
// ink or sharp: apply threshold for joined dots
float th = .5;
float sLeft = th * u_softness;
float sRight = (1. - th) * u_softness + .01;
C = smoothstep(th - sLeft - fwidth(C), th + sRight, C);
M = smoothstep(th - sLeft - fwidth(M), th + sRight, M);
Y = smoothstep(th - sLeft - fwidth(Y), th + sRight, Y);
K = smoothstep(th - sLeft - fwidth(K), th + sRight, K);
}
C *= u_colorC.a;
M *= u_colorM.a;
Y *= u_colorY.a;
K *= u_colorK.a;
vec3 ink = vec3(1.);
ink = applyInk(ink, u_colorK.rgb, K);
ink = applyInk(ink, u_colorC.rgb, C);
ink = applyInk(ink, u_colorM.rgb, M);
ink = applyInk(ink, u_colorY.rgb, Y);
shape = clamp(max(max(C, M), max(Y, K)), 0., 1.);
vec3 color = u_colorBack.rgb * u_colorBack.a;
float opacity = u_colorBack.a;
color = mix(color, ink, shape);
opacity += shape;
opacity = clamp(opacity, 0., 1.);
float grainOverlay = mix(noiseValues.g, noiseValues.b, .5);
grainOverlay = pow(grainOverlay, 1.3);
float grainOverlayV = grainOverlay * 2. - 1.;
vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
grainOverlayStrength = pow(grainOverlayStrength, .8);
color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
opacity += .5 * grainOverlayStrength;
opacity = clamp(opacity, 0., 1.);
fragColor = vec4(color, opacity);
}
`;
export interface HalftoneCmykUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string | undefined;
u_noiseTexture?: HTMLImageElement;
u_colorBack: [number, number, number, number];
u_colorC: [number, number, number, number];
u_colorM: [number, number, number, number];
u_colorY: [number, number, number, number];
u_colorK: [number, number, number, number];
u_size: number;
u_contrast: number;
u_softness: number;
u_grainSize: number;
u_grainMixer: number;
u_grainOverlay: number;
u_gridNoise: number;
u_floodC: number;
u_floodM: number;
u_floodY: number;
u_floodK: number;
u_gainC: number;
u_gainM: number;
u_gainY: number;
u_gainK: number;
u_type: (typeof HalftoneCmykTypes)[HalftoneCmykType];
}
export interface HalftoneCmykParams extends ShaderSizingParams, ShaderMotionParams {
image?: HTMLImageElement | string;
colorBack?: string;
colorC?: string;
colorM?: string;
colorY?: string;
colorK?: string;
size?: number;
contrast?: number;
softness?: number;
grainSize?: number;
grainMixer?: number;
grainOverlay?: number;
gridNoise?: number;
floodC?: number;
floodM?: number;
floodY?: number;
floodK?: number;
gainC?: number;
gainM?: number;
gainY?: number;
gainK?: number;
type?: HalftoneCmykType;
}
export const HalftoneCmykTypes = {
dots: 0,
ink: 1,
sharp: 2,
} as const;
export type HalftoneCmykType = keyof typeof HalftoneCmykTypes;
packages/shaders/src/shaders/halftone-dots.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';
/**
* A halftone-dot image filter featuring customizable grids, color palettes, and dot styles.
*
* Fragment shader uniforms:
* - u_image (sampler2D): Source image texture
* - u_imageAspectRatio (float): Aspect ratio of the source image
* - u_colorFront (vec4): Foreground color in RGBA, needs originalColors off
* - u_colorBack (vec4): Background color in RGBA
* - u_originalColors (bool): Use sampled image's original colors instead of colorFront
* - u_type (float): Dot style (0 = classic, 1 = gooey, 2 = holes, 3 = soft)
* - u_inverted (bool): Inverts the image luminance, doesn't affect the color scheme, needs contrast > 0
* - u_grid (float): Grid type (0 = square, 1 = hex)
* - u_size (float): Grid size relative to the image box (0 to 1)
* - u_radius (float): Maximum dot size relative to grid cell (0 to 2)
* - u_contrast (float): Contrast applied to the sampled image, at 0 the luminance is flat so all the dots get equal size (0 to 1)
* - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
* - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
* - u_grainSize (float): Scale applied to both grain distortion and grain overlay, needs grainMixer or grainOverlay > 0 (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const halftoneDotsFragmentShader: string = `#version 300 es
precision mediump float;
uniform vec4 u_colorFront;
uniform vec4 u_colorBack;
uniform float u_radius;
uniform float u_contrast;
uniform sampler2D u_image;
uniform float u_imageAspectRatio;
uniform float u_size;
uniform float u_grainMixer;
uniform float u_grainOverlay;
uniform float u_grainSize;
uniform float u_grid;
uniform bool u_originalColors;
uniform bool u_inverted;
uniform float u_type;
in vec2 v_imageUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ proceduralHash21 }
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = hash21(i);
float b = hash21(i + vec2(1.0, 0.0));
float c = hash21(i + vec2(0.0, 1.0));
float d = hash21(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
float lst(float edge0, float edge1, float x) {
return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
}
float sst(float edge0, float edge1, float x) {
return smoothstep(edge0, edge1, x);
}
float getCircle(vec2 uv, float r, float baseR) {
r = mix(.25 * baseR, 0., r);
float d = length(uv - .5);
float aa = fwidth(d);
return 1. - smoothstep(r - aa, r + aa, d);
}
float getCell(vec2 uv) {
float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x));
float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y));
return insideX * insideY;
}
float getCircleWithHole(vec2 uv, float r, float baseR) {
float cell = getCell(uv);
r = mix(.75 * baseR, 0., r);
float rMod = mod(r, .5);
float d = length(uv - .5);
float aa = fwidth(d);
float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);
if (r < .5) {
return circle;
} else {
return cell - circle;
}
}
float getGooeyBall(vec2 uv, float r, float baseR) {
float d = length(uv - .5);
float sizeRadius = .3;
if (u_grid == 1.) {
sizeRadius = .42;
}
sizeRadius = mix(sizeRadius * baseR, 0., r);
d = 1. - sst(0., sizeRadius, d);
d = pow(d, 2. + baseR);
return d;
}
float getSoftBall(vec2 uv, float r, float baseR) {
float d = length(uv - .5);
float sizeRadius = clamp(baseR, 0., 1.);
sizeRadius = mix(.5 * sizeRadius, 0., r);
d = 1. - lst(0., sizeRadius, d);
float powRadius = 1. - lst(0., 2., baseR);
d = pow(d, 4. + 3. * powRadius);
return d;
}
float getUvFrame(vec2 uv, vec2 pad) {
float aa = 0.0001;
float left = smoothstep(-pad.x, -pad.x + aa, uv.x);
float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
return left * right * bottom * top;
}
float sigmoid(float x, float k) {
return 1.0 / (1.0 + exp(-k * (x - 0.5)));
}
float getLumAtPx(vec2 uv, float contrast) {
vec4 tex = texture(u_image, uv);
vec3 color = vec3(
sigmoid(tex.r, contrast),
sigmoid(tex.g, contrast),
sigmoid(tex.b, contrast)
);
float lum = dot(vec3(0.2126, 0.7152, 0.0722), color);
lum = mix(1., lum, tex.a);
lum = u_inverted ? (1. - lum) : lum;
return lum;
}
float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) {
p += inCellOffset;
vec2 uv_i = floor(p);
vec2 uv_f = fract(p);
vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5);
float outOfFrame = getUvFrame(samplingUV, pad * stepSize);
float lum = getLumAtPx(samplingUV, contrast);
ballColor = texture(u_image, samplingUV);
ballColor.rgb *= ballColor.a;
ballColor *= outOfFrame;
float ball = 0.;
if (u_type == 0.) {
// classic
ball = getCircle(uv_f, lum, baseR);
} else if (u_type == 1.) {
// gooey
ball = getGooeyBall(uv_f, lum, baseR);
} else if (u_type == 2.) {
// holes
ball = getCircleWithHole(uv_f, lum, baseR);
} else if (u_type == 3.) {
// soft
ball = getSoftBall(uv_f, lum, baseR);
}
return ball * outOfFrame;
}
void main() {
float stepMultiplier = 1.;
if (u_type == 0.) {
// classic
stepMultiplier = 2.;
} else if (u_type == 1. || u_type == 3.) {
// gooey & soft
stepMultiplier = 6.;
}
float cellsPerSide = mix(300., 7., pow(u_size, .7));
cellsPerSide /= stepMultiplier;
float cellSizeY = 1. / cellsPerSide;
vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.);
if (u_type == 1. && u_grid == 1.) {
// gooey diagonal grid works differently
pad *= .7;
}
vec2 uv = v_imageUV;
uv -= vec2(.5);
uv /= pad;
float contrast = mix(0., 15., pow(u_contrast, 1.5));
float baseRadius = u_radius;
if (u_originalColors == true) {
contrast = mix(.1, 4., pow(u_contrast, 2.));
baseRadius = 2. * pow(.5 * u_radius, .3);
}
float totalShape = 0.;
vec3 totalColor = vec3(0.);
float totalOpacity = 0.;
vec4 ballColor;
float shape;
float stepSize = 1. / stepMultiplier;
for (float x = -0.5; x < 0.5; x += stepSize) {
for (float y = -0.5; y < 0.5; y += stepSize) {
vec2 offset = vec2(x, y);
if (u_grid == 1.) {
float rowIndex = floor((y + .5) / stepSize);
float colIndex = floor((x + .5) / stepSize);
if (stepSize == 1.) {
rowIndex = floor(uv.y + y + 1.);
if (u_type == 1.) {
colIndex = floor(uv.x + x + 1.);
}
}
if (u_type == 1.) {
if (mod(rowIndex + colIndex, 2.) == 1.) {
continue;
}
} else {
if (mod(rowIndex, 2.) == 1.) {
offset.x += .5 * stepSize;
}
}
}
shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor);
totalColor += ballColor.rgb * shape;
totalShape += shape;
totalOpacity += shape;
}
}
const float eps = 1e-4;
totalColor /= max(totalShape, eps);
totalOpacity /= max(totalShape, eps);
float finalShape = 0.;
if (u_type == 0.) {
finalShape = min(1., totalShape);
} else if (u_type == 1.) {
float aa = fwidth(totalShape);
float th = .5;
finalShape = smoothstep(th - aa, th + aa, totalShape);
} else if (u_type == 2.) {
finalShape = min(1., totalShape);
} else if (u_type == 3.) {
finalShape = totalShape;
}
vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
vec2 grainUV = v_imageUV - .5;
grainUV *= grainSize;
grainUV += .5;
if (u_grainMixer > 0.) {
float grain = valueNoise(grainUV);
grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain);
grain *= u_grainMixer;
finalShape = mix(finalShape, 0., grain);
}
vec3 color = vec3(0.);
float opacity = 0.;
if (u_originalColors == true) {
color = totalColor * finalShape;
opacity = totalOpacity * finalShape;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1. - opacity);
opacity = opacity + u_colorBack.a * (1. - opacity);
} else {
vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
float fgOpacity = u_colorFront.a;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
float bgOpacity = u_colorBack.a;
color = fgColor * finalShape;
opacity = fgOpacity * finalShape;
color += bgColor * (1. - opacity);
opacity += bgOpacity * (1. - opacity);
}
if (u_grainOverlay > 0.) {
float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
grainOverlay = pow(grainOverlay, 1.3);
float grainOverlayV = grainOverlay * 2. - 1.;
vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
grainOverlayStrength = pow(grainOverlayStrength, .8);
color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
opacity += .5 * grainOverlayStrength;
}
opacity = clamp(opacity, 0., 1.);
fragColor = vec4(color, opacity);
}
`;
export interface HalftoneDotsUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string | undefined;
u_colorFront: [number, number, number, number];
u_colorBack: [number, number, number, number];
u_size: number;
u_grid: (typeof HalftoneDotsGrids)[HalftoneDotsGrid];
u_radius: number;
u_contrast: number;
u_originalColors: boolean;
u_inverted: boolean;
u_grainMixer: number;
u_grainOverlay: number;
u_grainSize: number;
u_type: (typeof HalftoneDotsTypes)[HalftoneDotsType];
}
export interface HalftoneDotsParams extends ShaderSizingParams, ShaderMotionParams {
image?: HTMLImageElement | string;
colorFront?: string;
colorBack?: string;
size?: number;
grid?: HalftoneDotsGrid;
radius?: number;
contrast?: number;
originalColors?: boolean;
inverted?: boolean;
grainMixer?: number;
grainOverlay?: number;
grainSize?: number;
type?: HalftoneDotsType;
}
export const HalftoneDotsTypes = {
classic: 0,
gooey: 1,
holes: 2,
soft: 3,
} as const;
export type HalftoneDotsType = keyof typeof HalftoneDotsTypes;
export const HalftoneDotsGrids = {
square: 0,
hex: 1,
} as const;
export type HalftoneDotsGrid = keyof typeof HalftoneDotsGrids;
packages/shaders/src/shaders/heatmap.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';
export const heatmapMeta = {
maxColorCount: 10,
} as const;
/**
* A glowing gradient of colors flowing through an input shape.
* The effect creates a smoothly animated wave of intensity across the image.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_image (sampler2D): Pre-processed source image texture (R = contour, G = outer blur, B = inner blur)
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 10 heatmap colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_contour (float): Heat intensity near the edges of the input shape (0 to 1)
* - u_angle (float): Direction of the heatwaves in degrees, needs innerGlow or outerGlow > 0 (0 to 360)
* - u_noise (float): Grain applied across the entire graphic (0 to 1)
* - u_innerGlow (float): Size of the heated area inside the input shape (0 to 1)
* - u_outerGlow (float): Size of the heated area outside the input shape (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const heatmapFragmentShader: string = `#version 300 es
precision highp float;
in mediump vec2 v_imageUV;
in mediump vec2 v_objectUV;
out vec4 fragColor;
uniform sampler2D u_image;
uniform float u_time;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ heatmapMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_angle;
uniform float u_noise;
uniform float u_innerGlow;
uniform float u_outerGlow;
uniform float u_contour;
#define TWO_PI 6.28318530718
#define PI 3.14159265358979323846
float getImgFrame(vec2 uv, float th) {
float frame = 1.;
frame *= smoothstep(0., th, uv.y);
frame *= 1. - smoothstep(1. - th, 1., uv.y);
frame *= smoothstep(0., th, uv.x);
frame *= 1. - smoothstep(1. - th, 1., uv.x);
return frame;
}
float circle(vec2 uv, vec2 c, vec2 r) {
return 1. - smoothstep(r[0], r[1], length(uv - c));
}
float lst(float edge0, float edge1, float x) {
return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
}
float sst(float edge0, float edge1, float x) {
return smoothstep(edge0, edge1, x);
}
float shadowShape(vec2 uv, float t, float contour) {
vec2 scaledUV = uv;
// base shape tranjectory
float posY = mix(-1., 2., t);
// scaleX when it's moving down
scaledUV.y -= .5;
float mainCircleScale = sst(0., .8, posY) * lst(1.4, .9, posY);
scaledUV *= vec2(1., 1. + 1.5 * mainCircleScale);
scaledUV.y += .5;
// base shape
float innerR = .4;
float outerR = 1. - .3 * (sst(.1, .2, t) * (1. - sst(.2, .5, t)));
float s = circle(scaledUV, vec2(.5, posY - .2), vec2(innerR, outerR));
float shapeSizing = sst(.2, .3, t) * sst(.6, .3, t);
s = pow(s, 1.4);
s *= 1.2;
// flat gradient to take over the shadow shape
float topFlattener = 0.;
{
float pos = posY - uv.y;
float edge = 1.2;
topFlattener = lst(-.4, 0., pos) * (1. - sst(.0, edge, pos));
topFlattener = pow(topFlattener, 3.);
float topFlattenerMixer = (1. - sst(.0, .3, pos));
s = mix(topFlattener, s, topFlattenerMixer);
}
// apple right circle
{
float visibility = sst(.6, .7, t) * (1. - sst(.8, .9, t));
float angle = -2. -t * TWO_PI;
float rightCircle = circle(uv, vec2(.95 - .2 * cos(angle), .4 - .1 * sin(angle)), vec2(.15, .3));
rightCircle *= visibility;
s = mix(s, 0., rightCircle);
}
// apple top circle
{
float topCircle = circle(uv, vec2(.5, .19), vec2(.05, .25));
topCircle += 2. * contour * circle(uv, vec2(.5, .19), vec2(.2, .5));
float visibility = .55 * sst(.2, .3, t) * (1. - sst(.3, .45, t));
topCircle *= visibility;
s = mix(s, 0., topCircle);
}
float leafMask = circle(uv, vec2(.53, .13), vec2(.08, .19));
leafMask = mix(leafMask, 0., 1. - sst(.4, .54, uv.x));
leafMask = mix(0., leafMask, sst(.0, .2, uv.y));
leafMask *= (sst(.5, 1.1, posY) * sst(1.5, 1.3, posY));
s += leafMask;
// apple bottom circle
{
float visibility = sst(.0, .4, t) * (1. - sst(.6, .8, t));
s = mix(s, 0., visibility * circle(uv, vec2(.52, .92), vec2(.09, .25)));
}
// random balls that are invisible if apple logo is selected
{
float pos = sst(.0, .6, t) * (1. - sst(.6, 1., t));
s = mix(s, .5, circle(uv, vec2(.0, 1.2 - .5 * pos), vec2(.1, .3)));
s = mix(s, .0, circle(uv, vec2(1., .5 + .5 * pos), vec2(.1, .3)));
s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * sst(.7, .5, t)), vec2(.07, .22)));
s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * (1. - sst(.5, .7, t))), vec2(.07, .22)));
s /= max(1e-4, sst(1., .85, uv.y));
}
s = clamp(0., 1., s);
return s;
}
float blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) {
vec2 texel = 1.0 / vec2(textureSize(tex, 0));
vec2 r = radius * texel;
float w1 = 1.0, w2 = 2.0, w4 = 4.0;
float norm = 16.0;
float sum = w4 * centerSample;
sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).g;
sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).g;
sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).g;
sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).g;
sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).g;
sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).g;
sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).g;
sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).g;
return sum / norm;
}
void main() {
vec2 uv = v_objectUV + .5;
uv.y = 1. - uv.y;
vec2 imgUV = v_imageUV;
imgUV -= .5;
imgUV *= 0.5714285714285714;
imgUV += .5;
float imgSoftFrame = getImgFrame(imgUV, .03);
vec4 img = texture(u_image, imgUV);
vec2 dudx = dFdx(imgUV);
vec2 dudy = dFdy(imgUV);
if (img.a == 0.) {
fragColor = u_colorBack;
return;
}
float t = .1 * u_time;
t -= .3;
float tCopy = t + 1. / 3.;
float tCopy2 = t + 2. / 3.;
t = mod(t, 1.);
tCopy = mod(tCopy, 1.);
tCopy2 = mod(tCopy2, 1.);
vec2 animationUV = imgUV - vec2(.5);
float angle = -u_angle * PI / 180.;
float cosA = cos(angle);
float sinA = sin(angle);
animationUV = vec2(
animationUV.x * cosA - animationUV.y * sinA,
animationUV.x * sinA + animationUV.y * cosA
) + vec2(.5);
float shape = img[0];
img[1] = blurEdge3x3(u_image, imgUV, dudx, dudy, 8., img[1]);
float outerBlur = 1. - mix(1., img[1], shape);
float innerBlur = mix(img[1], 0., shape);
float contour = mix(img[2], 0., shape);
outerBlur *= imgSoftFrame;
float shadow = shadowShape(animationUV, t, innerBlur);
float shadowCopy = shadowShape(animationUV, tCopy, innerBlur);
float shadowCopy2 = shadowShape(animationUV, tCopy2, innerBlur);
float inner = .8 + .8 * innerBlur;
inner = mix(inner, 0., shadow);
inner = mix(inner, 0., shadowCopy);
inner = mix(inner, 0., shadowCopy2);
inner *= mix(0., 2., u_innerGlow);
inner += (u_contour * 2.) * contour;
inner = min(1., inner);
inner *= (1. - shape);
float outer = 0.;
{
t *= 3.;
t = mod(t - .1, 1.);
outer = .9 * pow(outerBlur, .8);
float y = mod(animationUV.y - t, 1.);
float animatedMask = sst(.3, .65, y) * (1. - sst(.65, 1., y));
animatedMask = .5 + animatedMask;
outer *= animatedMask;
outer *= mix(0., 5., pow(u_outerGlow, 2.));
outer *= imgSoftFrame;
}
inner = pow(inner, 1.2);
float heat = clamp(inner + outer, 0., 1.);
heat += (.005 + .35 * u_noise) * (fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
float mixer = heat * u_colorsCount;
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
float outerShape = 0.;
for (int i = 1; i < ${ heatmapMeta.maxColorCount + 1 }; i++) {
if (i > int(u_colorsCount)) break;
float m = clamp(mixer - float(i - 1), 0., 1.);
if (i == 1) {
outerShape = m;
}
vec4 c = u_colors[i - 1];
c.rgb *= c.a;
gradient = mix(gradient, c, m);
}
vec3 color = gradient.rgb * outerShape;
float opacity = gradient.a * outerShape;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1.0 - opacity);
opacity = opacity + u_colorBack.a * (1.0 - opacity);
color += .02 * (fract(sin(dot(uv + 1., vec2(12.9898, 78.233))) * 43758.5453123) - .5);
fragColor = vec4(color, opacity);
}
`;
export function toProcessedHeatmap(file: File | string): Promise<{ blob: Blob }> {
const canvas = document.createElement('canvas');
const canvasSize = 1000;
return new Promise((resolve, reject) => {
const image = new Image();
image.crossOrigin = 'anonymous';
image.addEventListener('load', () => {
if (typeof file === 'string' ? file.endsWith('.svg') : file.type === 'image/svg+xml') {
// Force SVG to load at a high fidelity size if it's an SVG
image.width = canvasSize;
image.height = canvasSize;
}
const ratio = image.naturalWidth / image.naturalHeight;
const maxBlur = Math.floor(canvasSize * 0.15);
const padding = Math.ceil(maxBlur * 2.5);
let imgWidth = canvasSize;
let imgHeight = canvasSize;
if (ratio > 1) {
imgHeight = Math.floor(canvasSize / ratio);
} else {
imgWidth = Math.floor(canvasSize * ratio);
}
canvas.width = imgWidth + 2 * padding;
canvas.height = imgHeight + 2 * padding;
const ctx = canvas.getContext('2d', { willReadFrequently: true });
if (!ctx) {
throw new Error('Failed to get canvas 2d context');
}
// 1) Draw original image once, no filters
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, padding, padding, imgWidth, imgHeight);
const { width, height } = canvas;
const srcImageData = ctx.getImageData(0, 0, width, height);
const src = srcImageData.data; // RGBA
// 2) Build grayscale array (luma)
const totalPixels = width * height;
const gray = new Uint8ClampedArray(totalPixels);
for (let i = 0; i < totalPixels; i++) {
const px = i * 4;
const r = src[px] ?? 0;
const g = src[px + 1] ?? 0;
const b = src[px + 2] ?? 0;
// Standard luma conversion
gray[i] = (0.299 * r + 0.587 * g + 0.114 * b) | 0;
}
// 3) Blur grayscale for each "filter" you previously used
const bigBlurRadius = maxBlur;
const innerBlurRadius = Math.max(1, Math.round(0.12 * maxBlur));
const contourRadius = 5;
const bigBlurGray = multiPassBlurGray(gray, width, height, bigBlurRadius, 3);
const innerBlurGray = multiPassBlurGray(gray, width, height, innerBlurRadius, 3);
const contourGray = multiPassBlurGray(gray, width, height, contourRadius, 1);
// 4) Combine into final ImageData
const processedImageData = ctx.createImageData(width, height);
const dst = processedImageData.data;
for (let i = 0; i < totalPixels; i++) {
const px = i * 4;
dst[px] = contourGray[i] ?? 0;
dst[px + 1] = bigBlurGray[i] ?? 0;
dst[px + 2] = innerBlurGray[i] ?? 0;
dst[px + 3] = 255;
}
ctx.putImageData(processedImageData, 0, 0);
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error('Failed to create PNG blob'));
return;
}
resolve({ blob });
}, 'image/png');
});
image.addEventListener('error', () => {
reject(new Error('Failed to load image'));
});
image.src = typeof file === 'string' ? file : URL.createObjectURL(file);
});
}
/**
* Fast box blur for grayscale images using an integral image.
* gray: Uint8ClampedArray of length width * height
* radius: blur radius in pixels
*/
function blurGray(gray: Uint8ClampedArray, width: number, height: number, radius: number): Uint8ClampedArray {
if (radius <= 0) {
return gray.slice();
}
const out = new Uint8ClampedArray(width * height);
const integral = new Uint32Array(width * height);
// Build integral image
for (let y = 0; y < height; y++) {
let rowSum = 0;
for (let x = 0; x < width; x++) {
const idx = y * width + x;
const v = gray[idx] ?? 0;
rowSum += v;
integral[idx] = rowSum + (y > 0 ? (integral[idx - width] ?? 0) : 0);
}
}
// Blur using integral image
for (let y = 0; y < height; y++) {
const y1 = Math.max(0, y - radius);
const y2 = Math.min(height - 1, y + radius);
for (let x = 0; x < width; x++) {
const x1 = Math.max(0, x - radius);
const x2 = Math.min(width - 1, x + radius);
const idxA = y2 * width + x2;
const idxB = y2 * width + (x1 - 1);
const idxC = (y1 - 1) * width + x2;
const idxD = (y1 - 1) * width + (x1 - 1);
const A = integral[idxA] ?? 0;
const B = x1 > 0 ? (integral[idxB] ?? 0) : 0;
const C = y1 > 0 ? (integral[idxC] ?? 0) : 0;
const D = x1 > 0 && y1 > 0 ? (integral[idxD] ?? 0) : 0;
const sum = A - B - C + D;
const area = (x2 - x1 + 1) * (y2 - y1 + 1);
out[y * width + x] = Math.round(sum / area);
}
}
return out;
}
function multiPassBlurGray(
gray: Uint8ClampedArray,
width: number,
height: number,
radius: number,
passes: number
): Uint8ClampedArray {
if (radius <= 0 || passes <= 1) {
return blurGray(gray, width, height, radius);
}
let input = gray;
let tmp: Uint8ClampedArray = gray;
for (let p = 0; p < passes; p++) {
tmp = blurGray(input, width, height, radius);
input = tmp;
}
return tmp;
}
export interface HeatmapUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string;
u_contour: number;
u_angle: number;
u_noise: number;
u_innerGlow: number;
u_outerGlow: number;
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
}
export interface HeatmapParams extends ShaderSizingParams, ShaderMotionParams {
image: HTMLImageElement | string;
contour?: number;
angle?: number;
noise?: number;
innerGlow?: number;
outerGlow?: number;
colorBack?: string;
colors?: string[];
}
packages/shaders/src/shaders/image-dithering.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { proceduralHash21, declarePI } from '../shader-utils.js';
/**
* A dithering image filter with support for 4 dithering modes and multiple color palettes
* (2-color, 3-color, and multicolor options, using either predefined colors or colors sampled
* from the original image).
*
* SIZING NOTE: This shader performs sizing in the fragment shader (not vertex shader) to keep
* u_pxSize in consistent actual pixels. The pixel grid is computed from gl_FragCoord before any
* transforms, so scaling/rotating only affects the underlying image.
* No vertex shader outputs (v_imageUV, v_objectUV, etc.) are used.
*
* Fragment shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_image (sampler2D): Source image texture
* - u_imageAspectRatio (float): Aspect ratio of the source image
* - u_colorFront (vec4): Foreground color in RGBA, needs originalColors off
* - u_colorBack (vec4): Background color in RGBA, needs originalColors off
* - u_colorHighlight (vec4): Secondary foreground color in RGBA (set same as colorFront for classic 2-color dithering), needs originalColors off
* - u_originalColors (bool): Use the original colors of the image instead of the color palette
* - u_inverted (bool): Inverts the image luminance, doesn't affect the color scheme
* - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)
* - u_pxSize (float): Pixel size of dithering grid (0.5 to 20)
* - u_colorSteps (float): Number of colors to use, applies to both color modes (1 to 7)
*
*/
// language=GLSL
export const imageDitheringFragmentShader: string = `#version 300 es
precision mediump float;
uniform vec2 u_resolution;
uniform float u_pixelRatio;
uniform float u_originX;
uniform float u_originY;
uniform float u_fit;
uniform float u_scale;
uniform float u_rotation;
uniform float u_offsetX;
uniform float u_offsetY;
uniform vec4 u_colorFront;
uniform vec4 u_colorBack;
uniform vec4 u_colorHighlight;
uniform sampler2D u_image;
uniform float u_imageAspectRatio;
uniform float u_type;
uniform float u_pxSize;
uniform bool u_originalColors;
uniform bool u_inverted;
uniform float u_colorSteps;
out vec4 fragColor;
${ proceduralHash21 }
${ declarePI }
float getUvFrame(vec2 uv, vec2 pad) {
float aa = 0.0001;
float left = smoothstep(-pad.x, -pad.x + aa, uv.x);
float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
return left * right * bottom * top;
}
vec2 getImageUV(vec2 uv) {
vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
float r = u_rotation * PI / 180.;
mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
vec2 imageBoxSize;
if (u_fit == 1.) { // contain
imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
} else if (u_fit == 2.) { // cover
imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
} else {
imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
}
imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
vec2 imageUV = uv;
imageUV *= imageBoxScale;
imageUV += boxOrigin * (imageBoxScale - 1.);
imageUV += graphicOffset;
imageUV /= u_scale;
imageUV.x *= u_imageAspectRatio;
imageUV = graphicRotation * imageUV;
imageUV.x /= u_imageAspectRatio;
imageUV += .5;
imageUV.y = 1. - imageUV.y;
return imageUV;
}
const int bayer2x2[4] = int[4](0, 2, 3, 1);
const int bayer4x4[16] = int[16](
0, 8, 2, 10,
12, 4, 14, 6,
3, 11, 1, 9,
15, 7, 13, 5
);
const int bayer8x8[64] = int[64](
0, 32, 8, 40, 2, 34, 10, 42,
48, 16, 56, 24, 50, 18, 58, 26,
12, 44, 4, 36, 14, 46, 6, 38,
60, 28, 52, 20, 62, 30, 54, 22,
3, 35, 11, 43, 1, 33, 9, 41,
51, 19, 59, 27, 49, 17, 57, 25,
15, 47, 7, 39, 13, 45, 5, 37,
63, 31, 55, 23, 61, 29, 53, 21
);
float getBayerValue(vec2 uv, int size) {
ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
int index = pos.y * size + pos.x;
if (size == 2) {
return float(bayer2x2[index]) / 4.0;
} else if (size == 4) {
return float(bayer4x4[index]) / 16.0;
} else if (size == 8) {
return float(bayer8x8[index]) / 64.0;
}
return 0.0;
}
void main() {
float pxSize = u_pxSize * u_pixelRatio;
vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;
pxSizeUV /= pxSize;
vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
vec2 normalizedUV = canvasPixelizedUV / u_resolution;
vec2 imageUV = getImageUV(normalizedUV);
vec2 ditheringNoiseUV = canvasPixelizedUV;
vec4 image = texture(u_image, imageUV);
float frame = getUvFrame(imageUV, pxSize / u_resolution);
int type = int(floor(u_type));
float dithering = 0.0;
float lum = dot(vec3(.2126, .7152, .0722), image.rgb);
lum = u_inverted ? (1. - lum) : lum;
switch (type) {
case 1: {
dithering = step(hash21(ditheringNoiseUV), lum);
} break;
case 2:
dithering = getBayerValue(pxSizeUV, 2);
break;
case 3:
dithering = getBayerValue(pxSizeUV, 4);
break;
default :
dithering = getBayerValue(pxSizeUV, 8);
break;
}
float colorSteps = max(floor(u_colorSteps), 1.);
vec3 color = vec3(0.0);
float opacity = 1.;
dithering -= .5;
float brightness = clamp(lum + dithering / colorSteps, 0.0, 1.0);
brightness = mix(0.0, brightness, frame);
brightness = mix(0.0, brightness, image.a);
float quantLum = floor(brightness * colorSteps + 0.5) / colorSteps;
quantLum = mix(0.0, quantLum, frame);
if (u_originalColors == true) {
vec3 normColor = image.rgb / max(lum, 0.001);
color = normColor * quantLum;
float quantAlpha = floor(image.a * colorSteps + 0.5) / colorSteps;
opacity = mix(quantLum, 1., quantAlpha);
} else {
vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
float fgOpacity = u_colorFront.a;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
float bgOpacity = u_colorBack.a;
vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;
float hlOpacity = u_colorHighlight.a;
fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));
fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));
color = fgColor * quantLum;
opacity = fgOpacity * quantLum;
color += bgColor * (1.0 - opacity);
opacity += bgOpacity * (1.0 - opacity);
}
fragColor = vec4(color, opacity);
}
`;
export interface ImageDitheringUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string;
u_colorFront: [number, number, number, number];
u_colorBack: [number, number, number, number];
u_colorHighlight: [number, number, number, number];
u_type: (typeof DitheringTypes)[DitheringType];
u_pxSize: number;
u_colorSteps: number;
u_originalColors: boolean;
u_inverted: boolean;
}
export interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {
image: HTMLImageElement | string;
colorFront?: string;
colorBack?: string;
colorHighlight?: string;
type?: DitheringType;
size?: number;
colorSteps?: number;
originalColors?: boolean;
inverted?: boolean;
}
export const DitheringTypes = {
'random': 1,
'2x2': 2,
'4x4': 3,
'8x8': 4,
} as const;
export type DitheringType = keyof typeof DitheringTypes;
packages/shaders/src/shaders/lens-distortion.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, proceduralHash21, rotation2 } from '../shader-utils.js';
export const lensDistortionMeta = {
maxSamples: 50,
} as const;
/**
*
* Lens Distortion image filter separates an image into shifting color layers
* (recreating the chromatic aberration of a lens) and warps the image geometry,
* curving it outward or inward like barrel and pincushion distortion.
*
* Fragment shader uniforms:
* - u_image (sampler2D): Source image texture
* - u_spread (float): Strength of the color split; how far the color layers are pushed apart; 0 is off (0 to 1)
* - u_bias (float): Shifts the colors toward one end of the spread; 0 spaces them evenly, needs spread > 0, count > 2 (-1 to 1)
* - u_angle (float): Direction of the spread in degrees, needs spread > 0, perspective < 1 (0 to 360)
* - u_perspective (float): Shapes the spread direction from a straight line (0) to a radial burst out from the centre (1), needs spread > 0 (0 to 1)
* - u_count (float): Number of sampled color layers along the spread; higher is smoother and costlier, needs spread > 0 (2 to 50)
* - u_dispersion (float): Overall amount of color dispersion; 1 gives each layer its own color from the spectrum, 0 keeps the original image color, needs spread > 0 (0 to 1)
* - u_dispersionShift (float): Balance of the dispersion between a soft circular zone at the centre and the rest of the image; 0 applies it evenly, -1 keeps it in the centre only, 1 keeps it at the edges only, needs spread > 0, dispersion > 0 (-1 to 1)
* - u_dispersionColor (float): Rotates the colors around the hue wheel, 0 to 1 for a full turn, needs spread > 0, dispersion > 0
* - u_focusCenter (float): Reduces the spread in a circular zone at the centre; 0 keeps it full to the centre, needs spread > 0 (0 to 1)
* - u_focusEdges (float): Reduces the spread toward the edges; 0 keeps it full to the edges, 1 restores the original image there, needs spread > 0 (0 to 1)
* - u_swirl (float): Rotates the color layers around the centre by an angle growing along the spread; 0 is off, needs spread > 0 (-1 to 1)
* - u_noise (float): Scatters the spread direction with noise; 0 is off, needs spread > 0 (0 to 1)
* - u_noiseFrequency (float): Frequency of the noise, 0 to 1 mapped internally to 0 to 18; higher is finer, needs spread > 0, noise > 0
* - u_noiseOffset (float): Offsets the noise pattern for a different seed, 0 to 1 mapped internally to 0 to 30, needs spread > 0, noise > 0
* - u_lensBulge (float): Radial lens warp of the image geometry; positive bulges out like a fisheye/barrel, negative pinches in like a pincushion; strong positive values fade out the corners (-1 to 1)
* - u_lensCircle (float): Squeezes pixels outside the inscribed circle inward so the outline becomes a circle; also turns the spread radial and damps it near the rim; 0 is off, 1 is full (0 to 1)
* - u_grainMixer (float): Scatters the spread with grain noise, breaking up the edges of the color layers, needs spread > 0 (0 to 1)
* - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
* - u_imageX (float): Pans the image horizontally behind the effect; 0 is centred (-1 to 1)
* - u_imageY (float): Pans the image vertically behind the effect; 0 is centred (-1 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const lensDistortionFragmentShader: string = `#version 300 es
precision mediump float;
uniform sampler2D u_image;
uniform float u_imageAspectRatio;
uniform float u_spread;
uniform float u_bias;
uniform float u_angle;
uniform float u_perspective;
uniform float u_count;
uniform float u_dispersion;
uniform float u_dispersionShift;
uniform float u_dispersionColor;
uniform float u_focusCenter;
uniform float u_focusEdges;
uniform float u_swirl;
uniform float u_noise;
uniform float u_noiseFrequency;
uniform float u_noiseOffset;
uniform float u_lensBulge;
uniform float u_lensCircle;
uniform float u_grainMixer;
uniform float u_grainOverlay;
uniform float u_imageX;
uniform float u_imageY;
in vec2 v_imageUV;
out vec4 fragColor;
${declarePI}
${proceduralHash21}
${rotation2}
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = hash21(i);
float b = hash21(i + vec2(1., 0.));
float c = hash21(i + vec2(0., 1.));
float d = hash21(i + vec2(1., 1.));
vec2 u = f * f * (3. - 2. * f);
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}
float getUvFrame(vec2 uv) {
vec2 invAA = 1. / clamp(fwidth(uv), 1e-5, .02);
vec2 lo = clamp(uv * invAA + .5, 0., 1.);
vec2 hi = clamp((1. - uv) * invAA + .5, 0., 1.);
return lo.x * hi.x * lo.y * hi.y;
}
vec4 sampleOverWhite(vec2 uv) {
vec4 img = texture(u_image, uv);
float cover = img.a * getUvFrame(uv);
vec3 colorOverWhite = mix(vec3(1.), img.rgb, cover);
return vec4(colorOverWhite, cover);
}
vec3 hueColor(float hue) {
vec3 rgb = clamp(abs(mod(hue * 6. + vec3(0., 4., 2.), 6.) - 3.) - 1., 0., 1.);
rgb = rgb * rgb * (3. - 2. * rgb);
return rgb;
}
float boxInradius() {
return .5 * min(u_imageAspectRatio, 1.);
}
float boxOutradius() {
return .5 * length(vec2(u_imageAspectRatio, 1.));
}
float spreadReach() {
return .7 * pow(u_spread, 1.3 + 2.7 * u_spread);
}
float innerCircleMask(float radius, float inradius) {
return 1. - smoothstep(.5 * inradius, 1.1 * inradius, radius);
}
float dispersionCurve(float t, float biasPow) {
float mirroredT = u_bias < 0. ? 1. - t : t;
float curved = pow(mirroredT, biasPow);
return u_bias < 0. ? 1. - curved : curved;
}
vec2 getSpread(vec2 fromCenter, float radius, vec2 warpedUV, float edgeAA, float inradius, float outradius, float reach, out float outStrength) {
float angleRad = radians(u_angle);
vec2 uniformDir = vec2(cos(angleRad), sin(angleRad));
float invInradius = 1. / inradius;
vec2 radialDir = fromCenter * invInradius;
float maxLen = (outradius + reach) * invInradius;
float radialLen = radius * invInradius;
if (radialLen > maxLen) radialDir *= maxLen / radialLen;
vec2 spreadDir = mix(uniformDir, radialDir, u_perspective);
float bandProximity = smoothstep(inradius * .8, inradius, radius);
float lensCircleMaxing = bandProximity * u_lensCircle * u_lensCircle * u_lensCircle;
spreadDir = mix(spreadDir, radialDir, lensCircleMaxing);
vec2 warpedAbs = abs(warpedUV - .5);
float inner = mix(1., smoothstep(0., mix(inradius, outradius, u_focusCenter), radius), u_focusCenter);
float boxDist = max(warpedAbs.x, warpedAbs.y) * 2.;
float outer = mix(1., 1. - min(boxDist, 1.), u_focusEdges);
float strength = inner * outer;
strength *= mix(1., mix(.15, .03, max(-u_lensBulge, 0.)), lensCircleMaxing);
vec2 outside = max(warpedAbs - .5, 0.);
float margin = max(reach * length(spreadDir) * (1. - u_lensCircle), edgeAA);
strength *= 1. - smoothstep(0., margin, length(outside));
outStrength = strength;
vec2 axis = spreadDir * (reach * strength);
if (u_noise > 0.) {
float turn = (valueNoise(fromCenter * u_noiseFrequency * 18. + u_noiseOffset * 30.) - .5) * 2. * u_noise;
float cs = cos(turn), sn = sin(turn);
axis = mat2(cs, -sn, sn, cs) * axis;
}
axis.x /= u_imageAspectRatio;
return axis;
}
vec2 lensWarp(vec2 fromCenter, float radius, float inradius, out float bulgeFade) {
bulgeFade = 1.;
if (u_lensBulge == 0. && u_lensCircle <= 0.) return fromCenter;
if (radius < 1e-5) return fromCenter;
float r = radius;
if (u_lensBulge != 0.) {
float rn = radius / inradius;
float bulge = abs(u_lensBulge) * (u_lensBulge > 0. ? 1.4 : 1.2);
if (u_lensBulge > 0.) bulgeFade = 1. - smoothstep(1.45, 1.53, rn * bulge);
float map = u_lensBulge > 0.
? tan(min(rn * bulge, 1.53)) / tan(bulge)
: atan(rn * tan(bulge)) / bulge;
float bulgeScale = map / rn;
fromCenter *= bulgeScale;
r *= bulgeScale;
}
if (u_lensCircle > 0.) {
vec2 dir = fromCenter / max(r, 1e-5);
vec2 halfBox = vec2(u_imageAspectRatio, 1.) * .5;
float rBox = min(halfBox.x / max(abs(dir.x), 1e-4), halfBox.y / max(abs(dir.y), 1e-4));
float band = inradius * mix(.03, .2, .5 * (u_lensBulge + 1.));
float innerEdge = inradius - band;
float over = smoothstep(0., 1., (r - innerEdge) / band);
float g = r + (rBox - inradius) * pow(over, 14.);
fromCenter = dir * mix(r, g, u_lensCircle);
}
return fromCenter;
}
void main() {
vec2 uv = v_imageUV;
float invAspect = 1. / u_imageAspectRatio;
float inradius = boxInradius();
float outradius = boxOutradius();
float reach = spreadReach();
vec2 fromCenter = uv - .5;
fromCenter.x *= u_imageAspectRatio;
float radius = length(fromCenter);
float bulgeFade;
vec2 warpedFromCenter = lensWarp(fromCenter, radius, inradius, bulgeFade);
vec2 baseUV = vec2(warpedFromCenter.x * invAspect, warpedFromCenter.y) + .5;
vec2 baseDerivative = fwidth(baseUV);
float edgeAA = clamp(2. * max(baseDerivative.x, baseDerivative.y), .001, .02);
float spreadStrength;
vec2 spreadAxis = getSpread(fromCenter, radius, baseUV, edgeAA, inradius, outradius, reach, spreadStrength);
vec2 grainUV = vec2(0.);
if (u_grainMixer > 0. || u_grainOverlay > 0.) {
vec2 dudx = dFdx(v_imageUV);
vec2 dudy = dFdy(v_imageUV);
grainUV = (v_imageUV - .5) * (.8 / vec2(length(dudx), length(dudy))) + .5;
}
if (u_grainMixer > 0.) {
float grainSeed = valueNoise(grainUV);
vec2 jit = fract(grainSeed * vec2(157.31, 113.57)) * 2. - 1.;
spreadAxis += jit * .3 * u_grainMixer * length(spreadAxis);
}
float count = floor(u_count);
int countInteger = int(count);
float invCount = 1. / count;
float invSpan = 1. / max(count - 1., 1.);
float hueBase = u_dispersionColor + .5;
float biasPower = 1. + 2. * abs(u_bias);
vec2 tapBias = .5 - vec2(u_imageX, u_imageY);
float centerAmount = clamp(1. - u_dispersionShift, 0., 1.);
float edgesAmount = clamp(1. + u_dispersionShift, 0., 1.);
float dispersion = u_dispersion * mix(edgesAmount, centerAmount, innerCircleMask(radius, inradius));
float dispersionPower = pow(dispersion, .8);
float warpedRadius = length(warpedFromCenter);
float swirlAngle = u_swirl * .4 * PI * spreadStrength * u_spread * min(1., inradius / max(warpedRadius, 1e-4));
vec3 colorSum = vec3(0.);
vec3 weightSum = vec3(0.);
float coverSum = 0.;
for (int i = 0; i < ${lensDistortionMeta.maxSamples}; i++) {
if (i >= countInteger) break;
float layer = float(i);
float hue = hueBase + layer * invCount;
float spread = layer * invSpan;
if (u_bias != 0.) spread = dispersionCurve(spread, biasPower);
// mix(axis, -axis, spread) is axis scaled by the signed position along the fan
float fanPos = 1. - 2. * spread;
vec2 tapUV = baseUV + spreadAxis * fanPos - .5;
if (u_swirl != 0.) {
tapUV.x *= u_imageAspectRatio;
tapUV = rotate(tapUV, swirlAngle * fanPos);
tapUV.x *= invAspect;
}
vec4 tap = sampleOverWhite(tapUV + tapBias);
vec3 weight = 1. - dispersionPower * hueColor(hue);
colorSum += tap.rgb * weight;
weightSum += weight;
coverSum += tap.a;
}
vec3 color = colorSum / max(weightSum, 1e-4);
float coverAvg = coverSum * invCount;
float ground = min(color.r, min(color.g, color.b));
float alpha = max(coverAvg, 1. - ground);
vec3 premult = max(color - (1. - alpha), 0.);
fragColor = vec4(premult, alpha) * bulgeFade;
if (u_grainOverlay > 0.) {
float grain = valueNoise(rotate(grainUV, 1.) + vec2(3.));
grain = mix(grain, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
grain = pow(grain, 1.3);
float grainV = grain * 2. - 1.;
float grainStrength = pow(u_grainOverlay * abs(grainV), .8) * fragColor.a;
fragColor.rgb = mix(fragColor.rgb, vec3(step(0., grainV)) * fragColor.a, .35 * grainStrength);
}
}
`;
export interface LensDistortionUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string | undefined;
u_spread: number;
u_bias: number;
u_angle: number;
u_perspective: number;
u_count: number;
u_dispersion: number;
u_dispersionShift: number;
u_dispersionColor: number;
u_focusCenter: number;
u_focusEdges: number;
u_swirl: number;
u_noise: number;
u_noiseFrequency: number;
u_noiseOffset: number;
u_lensBulge: number;
u_lensCircle: number;
u_grainMixer: number;
u_grainOverlay: number;
u_imageX: number;
u_imageY: number;
}
export interface LensDistortionParams extends ShaderSizingParams, ShaderMotionParams {
image?: HTMLImageElement | string;
spread?: number;
bias?: number;
angle?: number;
perspective?: number;
count?: number;
dispersion?: number;
dispersionShift?: number;
dispersionColor?: number;
focusCenter?: number;
focusEdges?: number;
swirl?: number;
noise?: number;
noiseFrequency?: number;
noiseOffset?: number;
lensBulge?: number;
lensCircle?: number;
grainMixer?: number;
grainOverlay?: number;
imageX?: number;
imageY?: number;
}
packages/shaders/src/shaders/liquid-metal.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, rotation2, simplexNoise, colorBandingFix } from '../shader-utils.js';
/**
* Futuristic liquid metal material applied to uploaded logo or abstract shape.
* Fluid motion imitation applied over user image with animated stripe pattern
* getting distorted along shape edges.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_resolution (vec2): Canvas resolution in pixels
* - u_image (sampler2D): Pre-processed source image texture (R = edge gradient, G = opacity)
* - u_colorBack (vec4): Background color in RGBA
* - u_colorTint (vec4): Overlay color in RGBA (color burn blending used)
* - u_repetition (float): Density of pattern stripes (1 to 10)
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
* - u_shiftRed (float): R-channel dispersion (-1 to 1)
* - u_shiftBlue (float): B-channel dispersion (-1 to 1)
* - u_distortion (float): Noise distortion over the stripes pattern (0 to 1)
* - u_contour (float): Strength of the distortion on the shape edges (0 to 1)
* - u_angle (float): Direction of pattern animation in degrees (0 to 360)
* - u_shape (float): Predefined shape mask, needs no image (0 = none, 1 = circle, 2 = daisy, 3 = diamond, 4 = metaballs)
* - u_isImage (bool): Whether an image is being used as the effect mask
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied (used when no image)
* - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio (used for canvas-fill mode)
* - v_responsiveBoxGivenSize (vec2): TBD
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const liquidMetalFragmentShader: string = `#version 300 es
precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec4 u_colorBack;
uniform vec4 u_colorTint;
uniform float u_softness;
uniform float u_repetition;
uniform float u_shiftRed;
uniform float u_shiftBlue;
uniform float u_distortion;
uniform float u_contour;
uniform float u_angle;
uniform float u_shape;
uniform bool u_isImage;
in vec2 v_objectUV;
in vec2 v_responsiveUV;
in vec2 v_responsiveBoxGivenSize;
in vec2 v_imageUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ simplexNoise }
float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {
float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p));
float border = w[0];
ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));
if (u_isImage == true) {
bump = smoothstep(.2, .8, bump);
}
border = w[0] + .4 * (1. - bump) * w[1];
ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));
border = w[0] + .5 * (1. - bump) * w[1];
ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));
border = w[0] + w[1];
ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));
float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p));
// Tint color is applied with color burn blending
ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);
return ch;
}
float getImgFrame(vec2 uv, float th) {
float frame = 1.;
frame *= smoothstep(0., th, uv.y);
frame *= 1.0 - smoothstep(1. - th, 1., uv.y);
frame *= smoothstep(0., th, uv.x);
frame *= 1.0 - smoothstep(1. - th, 1., uv.x);
return frame;
}
float blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) {
vec2 texel = 1.0 / vec2(textureSize(tex, 0));
vec2 r = radius * texel;
float w1 = 1.0, w2 = 2.0, w4 = 4.0;
float norm = 16.0;
float sum = w4 * centerSample;
sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).r;
sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).r;
sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).r;
sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).r;
sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).r;
sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).r;
sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).r;
sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).r;
return sum / norm;
}
float lst(float edge0, float edge1, float x) {
return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
}
void main() {
const float firstFrameOffset = 2.8;
float t = .3 * (u_time + firstFrameOffset);
vec2 uv = v_imageUV;
vec2 dudx = dFdx(v_imageUV);
vec2 dudy = dFdy(v_imageUV);
vec4 img = textureGrad(u_image, uv, dudx, dudy);
if (u_isImage == false) {
uv = v_objectUV + .5;
uv.y = 1. - uv.y;
}
float cycleWidth = u_repetition;
float edge = 0.;
float contOffset = 1.;
vec2 rotatedUV = uv - vec2(.5);
float angle = (-u_angle + 70.) * PI / 180.;
float cosA = cos(angle);
float sinA = sin(angle);
rotatedUV = vec2(
rotatedUV.x * cosA - rotatedUV.y * sinA,
rotatedUV.x * sinA + rotatedUV.y * cosA
) + vec2(.5);
// u_contour is applied in 2 separate ranges:
// - 0 to .4 sets the edge hardness, saturated above .4 (both branches below)
// - .5 to 1 warps the stripes direction along the edges, inactive below .5 (see u_contour range 2)
if (u_isImage == true) {
float edgeRaw = img.r;
edge = blurEdge3x3(u_image, uv, dudx, dudy, 6., edgeRaw);
edge = pow(edge, 1.6);
edge *= mix(0.0, 1.0, smoothstep(0.0, 0.4, u_contour));
} else {
if (u_shape < 1.) {
// full-fill on canvas
vec2 borderUV = v_responsiveUV + .5;
float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
vec2 mask = min(borderUV, 1. - borderUV);
vec2 pixel_thickness = min(250. / v_responsiveBoxGivenSize, vec2(.5));
float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
maskX = pow(maskX, .25);
maskY = pow(maskY, .25);
edge = clamp(1. - maskX * maskY, 0., 1.);
uv = v_responsiveUV;
if (ratio > 1.) {
uv.y /= ratio;
} else {
uv.x *= ratio;
}
uv += .5;
uv.y = 1. - uv.y;
cycleWidth *= 2.;
contOffset = 1.5;
} else if (u_shape < 2.) {
// circle
vec2 shapeUV = uv - .5;
shapeUV *= .67;
edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);
} else if (u_shape < 3.) {
// daisy
vec2 shapeUV = uv - .5;
shapeUV *= 1.68;
float r = length(shapeUV) * 2.;
float a = atan(shapeUV.y, shapeUV.x) + .2;
r *= (1. + .05 * sin(3. * a + 2. * t));
float f = abs(cos(a * 3.));
edge = smoothstep(f, f + .7, r);
edge *= edge;
uv *= .8;
cycleWidth *= 1.6;
} else if (u_shape < 4.) {
// diamond
vec2 shapeUV = uv - .5;
shapeUV = rotate(shapeUV, .25 * PI);
shapeUV *= 1.42;
shapeUV += .5;
vec2 mask = min(shapeUV, 1. - shapeUV);
vec2 pixel_thickness = vec2(.15);
float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
maskX = pow(maskX, .25);
maskY = pow(maskY, .25);
edge = clamp(1. - maskX * maskY, 0., 1.);
} else if (u_shape < 5.) {
// metaballs
vec2 shapeUV = uv - .5;
shapeUV *= 1.3;
edge = 0.;
for (int i = 0; i < 5; i++) {
float fi = float(i);
float speed = 1.5 + 2./3. * sin(fi * 12.345);
float angle = -fi * 1.5;
vec2 dir1 = vec2(cos(angle), sin(angle));
vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));
vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));
float d = length(shapeUV + traj);
edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
}
edge = 1. - smoothstep(.65, .9, edge);
edge = pow(edge, 4.);
}
edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour));
}
float opacity = 0.;
if (u_isImage == true) {
opacity = img.g;
float frame = getImgFrame(v_imageUV, 0.);
opacity *= frame;
} else {
opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);
if (u_shape < 2.) {
edge = 1.2 * edge;
} else if (u_shape < 5.) {
edge = 1.8 * pow(edge, 1.5);
}
}
float diagBLtoTR = rotatedUV.x - rotatedUV.y;
float diagTLtoBR = rotatedUV.x + rotatedUV.y;
vec3 color = vec3(0.);
vec3 color1 = vec3(.98, 0.98, 1.);
vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));
vec2 grad_uv = uv - .5;
float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));
grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);
float direction = grad_uv.x;
float bump = pow(1.8 * dist, 1.2);
bump = 1. - bump;
bump *= pow(uv.y, .3);
float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);
float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);
float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);
float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;
float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;
float noise = snoise(uv - t);
edge += (1. - edge) * u_distortion * noise;
direction += diagBLtoTR;
float contour = 0.;
direction -= 2. * noise * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge)));
// u_contour range 2
direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour));
direction -= 1.7 * edge * smoothstep(.5, 1., u_contour);
direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge));
bump *= clamp(pow(uv.y, .1), .3, 1.);
direction *= (.1 + (1.1 - edge) * bump);
direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge)));
direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y)));
direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y)));
direction *= (.5 + .5 * pow(uv.y, 2.));
direction *= cycleWidth;
direction -= t;
float colorDispersion = (1. - bump);
colorDispersion = clamp(colorDispersion, 0., 1.);
float dispersionRed = colorDispersion;
dispersionRed += .03 * bump * noise;
dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump)));
dispersionRed -= diagBLtoTR;
float dispersionBlue = colorDispersion;
dispersionBlue *= 1.3;
dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump)));
dispersionBlue -= .2 * edge;
dispersionRed *= (u_shiftRed / 20.);
dispersionBlue *= (u_shiftBlue / 20.);
float blur = 0.;
float rExtraBlur = 0.;
float gExtraBlur = 0.;
if (u_isImage == true) {
float softness = 0.05 * u_softness;
blur = softness + .5 * smoothstep(1., 10., u_repetition) * smoothstep(.0, 1., edge);
float smallCanvasT = 1.0 - smoothstep(100., 500., min(u_resolution.x, u_resolution.y));
blur += smallCanvasT * smoothstep(.0, 1., edge);
rExtraBlur = softness * (0.05 + .1 * (u_shiftRed / 20.) * bump);
gExtraBlur = softness * 0.05 / max(0.001, abs(1. - diagBLtoTR));
} else {
blur = u_softness / 15. + .3 * contour;
}
vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
w[1] -= .02 * smoothstep(.0, 1., edge + bump);
float stripe_r = fract(direction + dispersionRed);
float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r) + rExtraBlur, bump, u_colorTint.r);
float stripe_g = fract(direction);
float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g) + gExtraBlur, bump, u_colorTint.g);
float stripe_b = fract(direction - dispersionBlue);
float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b);
color = vec3(r, g, b);
color *= opacity;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1. - opacity);
opacity = opacity + u_colorBack.a * (1. - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
// Configuration for Poisson solver
export const POISSON_CONFIG_OPTIMIZED = {
measurePerformance: false, // Set to true to see performance metrics
workingSize: 512, // Size to solve Poisson at (will upscale to original size)
iterations: 40, // SOR converges ~2-20x faster than standard Gauss-Seidel
};
// Precomputed pixel data for sparse processing
interface SparsePixelData {
interiorPixels: Uint32Array; // Indices of interior pixels
boundaryPixels: Uint32Array; // Indices of boundary pixels
pixelCount: number;
// Neighbor indices for each interior pixel (4 neighbors per pixel)
// Layout: [east, west, north, south] for each pixel
neighborIndices: Int32Array;
}
export function toProcessedLiquidMetal(file: File | string): Promise<{ imageData: ImageData; pngBlob: Blob }> {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const isBlob = typeof file === 'string' && file.startsWith('blob:');
return new Promise((resolve, reject) => {
if (!file || !ctx) {
reject(new Error('Invalid file or canvas context'));
return;
}
const blobContentTypePromise = isBlob && fetch(file).then((res) => res.headers.get('Content-Type'));
const img = new Image();
img.crossOrigin = 'anonymous';
const totalStartTime = performance.now();
img.onload = async () => {
// Force SVG to load at a high fidelity size if it's an SVG
let isSVG;
const blobContentType = await blobContentTypePromise;
if (blobContentType) {
isSVG = blobContentType === 'image/svg+xml';
} else if (typeof file === 'string') {
isSVG = file.endsWith('.svg') || file.startsWith('data:image/svg+xml');
} else {
isSVG = file.type === 'image/svg+xml';
}
let originalWidth = img.width || img.naturalWidth;
let originalHeight = img.height || img.naturalHeight;
if (isSVG) {
// Scale SVG to max dimension while preserving aspect ratio
const svgMaxSize = 4096;
const aspectRatio = originalWidth / originalHeight;
if (originalWidth > originalHeight) {
originalWidth = svgMaxSize;
originalHeight = svgMaxSize / aspectRatio;
} else {
originalHeight = svgMaxSize;
originalWidth = svgMaxSize * aspectRatio;
}
img.width = originalWidth;
img.height = originalHeight;
}
// Always scale to working resolution for consistency
const minDimension = Math.min(originalWidth, originalHeight);
const targetSize = POISSON_CONFIG_OPTIMIZED.workingSize;
// Calculate scale to fit within workingSize
const scaleFactor = targetSize / minDimension;
const width = Math.round(originalWidth * scaleFactor);
const height = Math.round(originalHeight * scaleFactor);
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
console.log(`[Processing Mode]`);
console.log(` Original: ${originalWidth}×${originalHeight}`);
console.log(` Working: ${width}×${height} (${(scaleFactor * 100).toFixed(1)}% scale)`);
if (scaleFactor < 1) {
console.log(` Speedup: ~${Math.round(1 / (scaleFactor * scaleFactor))}×`);
}
}
canvas.width = originalWidth;
canvas.height = originalHeight;
// Use a smaller canvas for shape detection and Poisson solving
const shapeCanvas = document.createElement('canvas');
shapeCanvas.width = width;
shapeCanvas.height = height;
const shapeCtx = shapeCanvas.getContext('2d')!;
shapeCtx.drawImage(img, 0, 0, width, height);
// 1) Build optimized masks using TypedArrays
const startMask = performance.now();
const shapeImageData = shapeCtx.getImageData(0, 0, width, height);
const data = shapeImageData.data;
// Use Uint8Array for masks (1 byte per pixel vs 8+ bytes for boolean array)
const shapeMask = new Uint8Array(width * height);
const boundaryMask = new Uint8Array(width * height);
// First pass: identify shape pixels
let shapePixelCount = 0;
for (let i = 0, idx = 0; i < data.length; i += 4, idx++) {
const a = data[i + 3];
const isShape = a === 0 ? 0 : 1;
shapeMask[idx] = isShape;
shapePixelCount += isShape;
}
// 2) Optimized boundary detection using sparse approach
// Only check shape pixels, not all pixels
const boundaryIndices: number[] = [];
const interiorIndices: number[] = [];
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const idx = y * width + x;
if (!shapeMask[idx]) continue;
// Check if pixel is on boundary (optimized: early exit)
let isBoundary = false;
// Check 4-connected neighbors first (most common case)
if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
isBoundary = true;
} else {
// Check all 8 neighbors (including diagonals) for comprehensive boundary detection
isBoundary =
!shapeMask[idx - 1] || // left
!shapeMask[idx + 1] || // right
!shapeMask[idx - width] || // top
!shapeMask[idx + width] || // bottom
!shapeMask[idx - width - 1] || // top-left
!shapeMask[idx - width + 1] || // top-right
!shapeMask[idx + width - 1] || // bottom-left
!shapeMask[idx + width + 1]; // bottom-right
}
if (isBoundary) {
boundaryMask[idx] = 1;
boundaryIndices.push(idx);
} else {
interiorIndices.push(idx);
}
}
}
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
console.log(`[Mask Building] Time: ${(performance.now() - startMask).toFixed(2)}ms`);
console.log(
` Shape pixels: ${shapePixelCount} / ${width * height} (${((shapePixelCount / (width * height)) * 100).toFixed(1)}%)`
);
console.log(` Interior pixels: ${interiorIndices.length}`);
console.log(` Boundary pixels: ${boundaryIndices.length}`);
}
// 3) Precompute sparse data structure for solver
const sparseData = buildSparseData(
shapeMask,
boundaryMask,
new Uint32Array(interiorIndices),
new Uint32Array(boundaryIndices),
width,
height
);
// 4) Solve Poisson equation with optimized sparse solver
const startSolve = performance.now();
const u = solvePoissonSparse(sparseData, shapeMask, boundaryMask, width, height);
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
console.log(`[Poisson Solve] Time: ${(performance.now() - startSolve).toFixed(2)}ms`);
}
// 5) Generate output image
let maxVal = 0;
let finalImageData: ImageData;
// Only check shape pixels for max value
for (let i = 0; i < interiorIndices.length; i++) {
const idx = interiorIndices[i]!;
if (u[idx]! > maxVal) maxVal = u[idx]!;
}
// Create gradient image at working resolution
const tempCanvas = document.createElement('canvas');
tempCanvas.width = width;
tempCanvas.height = height;
const tempCtx = tempCanvas.getContext('2d')!;
const tempImg = tempCtx.createImageData(width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const idx = y * width + x;
const px = idx * 4;
if (!shapeMask[idx]) {
tempImg.data[px] = 255;
tempImg.data[px + 1] = 255;
tempImg.data[px + 2] = 255;
tempImg.data[px + 3] = 0; // Alpha = 0 for background
} else {
const poissonRatio = u[idx]! / maxVal;
const gray = 255 * (1 - poissonRatio);
tempImg.data[px] = gray;
tempImg.data[px + 1] = gray;
tempImg.data[px + 2] = gray;
tempImg.data[px + 3] = 255; // Alpha = 255 for shape
}
}
}
tempCtx.putImageData(tempImg, 0, 0);
// Upscale to original resolution with smooth interpolation
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(tempCanvas, 0, 0, width, height, 0, 0, originalWidth, originalHeight);
// Now get the upscaled image data for final output
const outImg = ctx.getImageData(0, 0, originalWidth, originalHeight);
// Re-apply edges from original resolution with anti-aliasing
// This ensures edges are pixel-perfect while gradient is smooth
const originalCanvas = document.createElement('canvas');
originalCanvas.width = originalWidth;
originalCanvas.height = originalHeight;
const originalCtx = originalCanvas.getContext('2d')!;
// originalCtx.fillStyle = "white";
// originalCtx.fillRect(0, 0, originalWidth, originalHeight);
originalCtx.drawImage(img, 0, 0, originalWidth, originalHeight);
const originalData = originalCtx.getImageData(0, 0, originalWidth, originalHeight);
// Process each pixel: Red channel = gradient, Alpha channel = original alpha
for (let i = 0; i < outImg.data.length; i += 4) {
const a = originalData.data[i + 3]!;
// Use only alpha to determine background vs shape
const upscaledAlpha = outImg.data[i + 3]!;
if (a === 0) {
// Background pixel
outImg.data[i] = 255;
outImg.data[i + 1] = 0;
} else {
// Red channel carries the gradient
// Check if upscale missed this pixel by looking at alpha channel
// If upscaled alpha is 0, the low-res version thought this was background
outImg.data[i] = upscaledAlpha === 0 ? 0 : outImg.data[i]!; // gradient or 0
outImg.data[i + 1] = a; // original alpha
}
// Unused channels fixed
outImg.data[i + 2] = 255;
outImg.data[i + 3] = 255;
}
ctx.putImageData(outImg, 0, 0);
finalImageData = outImg;
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error('Failed to create PNG blob'));
return;
}
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
const totalTime = performance.now() - totalStartTime;
console.log(`[Total Processing Time] ${totalTime.toFixed(2)}ms`);
if (scaleFactor < 1) {
const estimatedFullResTime = totalTime * Math.pow((originalWidth * originalHeight) / (width * height), 1.5);
console.log(`[Estimated time at full resolution] ~${estimatedFullResTime.toFixed(0)}ms`);
console.log(
`[Time saved] ~${(estimatedFullResTime - totalTime).toFixed(0)}ms (${Math.round(estimatedFullResTime / totalTime)}× faster)`
);
}
}
resolve({
imageData: finalImageData,
pngBlob: blob,
});
}, 'image/png');
};
img.onerror = () => reject(new Error('Failed to load image'));
img.src = typeof file === 'string' ? file : URL.createObjectURL(file);
});
}
function buildSparseData(
shapeMask: Uint8Array,
boundaryMask: Uint8Array,
interiorPixels: Uint32Array,
boundaryPixels: Uint32Array,
width: number,
height: number
): SparsePixelData {
const pixelCount = interiorPixels.length;
// Build neighbor indices for sparse processing
// For each interior pixel, store indices of its 4 neighbors
// Use -1 for out-of-bounds or non-shape neighbors
const neighborIndices = new Int32Array(pixelCount * 4);
for (let i = 0; i < pixelCount; i++) {
const idx = interiorPixels[i]!;
const x = idx % width;
const y = Math.floor(idx / width);
// East neighbor
neighborIndices[i * 4 + 0] = x < width - 1 && shapeMask[idx + 1] ? idx + 1 : -1;
// West neighbor
neighborIndices[i * 4 + 1] = x > 0 && shapeMask[idx - 1] ? idx - 1 : -1;
// North neighbor
neighborIndices[i * 4 + 2] = y > 0 && shapeMask[idx - width] ? idx - width : -1;
// South neighbor
neighborIndices[i * 4 + 3] = y < height - 1 && shapeMask[idx + width] ? idx + width : -1;
}
return {
interiorPixels,
boundaryPixels,
pixelCount,
neighborIndices,
};
}
function solvePoissonSparse(
sparseData: SparsePixelData,
shapeMask: Uint8Array,
boundaryMask: Uint8Array,
width: number,
height: number
): Float32Array {
// This controls how smooth the falloff gradient will be and extend into the shape
const ITERATIONS = POISSON_CONFIG_OPTIMIZED.iterations;
// Keep C constant - only iterations control gradient spread
const C = 0.01;
const u = new Float32Array(width * height);
const { interiorPixels, neighborIndices, pixelCount } = sparseData;
// Performance tracking
const startTime = performance.now();
// Red-Black SOR for better symmetry with fewer iterations
// omega between 1.8-1.95 typically gives best convergence for Poisson
const omega = 1.9;
// Pre-classify pixels as red or black for efficient processing
const redPixels: number[] = [];
const blackPixels: number[] = [];
for (let i = 0; i < pixelCount; i++) {
const idx = interiorPixels[i]!;
const x = idx % width;
const y = Math.floor(idx / width);
if ((x + y) % 2 === 0) {
redPixels.push(i);
} else {
blackPixels.push(i);
}
}
for (let iter = 0; iter < ITERATIONS; iter++) {
// Red pass: update red pixels
for (const i of redPixels) {
const idx = interiorPixels[i]!;
// Get precomputed neighbor indices
const eastIdx = neighborIndices[i * 4 + 0]!;
const westIdx = neighborIndices[i * 4 + 1]!;
const northIdx = neighborIndices[i * 4 + 2]!;
const southIdx = neighborIndices[i * 4 + 3]!;
// Sum neighbors (use 0 for out-of-bounds)
let sumN = 0;
if (eastIdx >= 0) sumN += u[eastIdx]!;
if (westIdx >= 0) sumN += u[westIdx]!;
if (northIdx >= 0) sumN += u[northIdx]!;
if (southIdx >= 0) sumN += u[southIdx]!;
// SOR update: blend new value with old value
const newValue = (C + sumN) / 4;
u[idx] = omega * newValue + (1 - omega) * u[idx]!;
}
// Black pass: update black pixels
for (const i of blackPixels) {
const idx = interiorPixels[i]!;
// Get precomputed neighbor indices
const eastIdx = neighborIndices[i * 4 + 0]!;
const westIdx = neighborIndices[i * 4 + 1]!;
const northIdx = neighborIndices[i * 4 + 2]!;
const southIdx = neighborIndices[i * 4 + 3]!;
// Sum neighbors (use 0 for out-of-bounds)
let sumN = 0;
if (eastIdx >= 0) sumN += u[eastIdx]!;
if (westIdx >= 0) sumN += u[westIdx]!;
if (northIdx >= 0) sumN += u[northIdx]!;
if (southIdx >= 0) sumN += u[southIdx]!;
// SOR update: blend new value with old value
const newValue = (C + sumN) / 4;
u[idx] = omega * newValue + (1 - omega) * u[idx]!;
}
}
if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {
const elapsed = performance.now() - startTime;
console.log(`[Optimized Poisson Solver (SOR ω=${omega})]`);
console.log(` Working size: ${width}×${height}`);
console.log(` Iterations: ${ITERATIONS}`);
console.log(` Time: ${elapsed.toFixed(2)}ms`);
console.log(` Interior pixels processed: ${pixelCount}`);
console.log(` Speed: ${((ITERATIONS * pixelCount) / (elapsed * 1000)).toFixed(2)} Mpixels/sec`);
}
return u;
}
export interface LiquidMetalUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colorTint: [number, number, number, number];
u_image: HTMLImageElement | string | undefined;
u_repetition: number;
u_shiftRed: number;
u_shiftBlue: number;
u_contour: number;
u_softness: number;
u_distortion: number;
u_angle: number;
u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];
u_isImage: boolean;
}
export interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colorTint?: string;
image?: HTMLImageElement | string | undefined;
repetition?: number;
shiftRed?: number;
shiftBlue?: number;
contour?: number;
softness?: number;
distortion?: number;
angle?: number;
shape?: LiquidMetalShape;
}
export const LiquidMetalShapes = {
none: 0,
circle: 1,
daisy: 2,
diamond: 3,
metaballs: 4,
} as const;
export type LiquidMetalShape = keyof typeof LiquidMetalShapes;
packages/shaders/src/shaders/mesh-gradient.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import {
type ShaderSizingParams,
type ShaderSizingUniforms,
} from '../shader-sizing.js';
import { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';
export const meshGradientMeta = {
maxColorCount: 10,
} as const;
/**
* A flowing composition of color spots, moving along distinct trajectories
* and transformed by organic distortion.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colors (vec4[]): Up to 10 color spots in RGBA
* - u_colorsCount (float): Number of active colors
* - u_distortion (float): Power of organic noise distortion (0 to 1)
* - u_swirl (float): Power of vortex distortion (0 to 1)
* - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
* - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const meshGradientFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec4 u_colors[${meshGradientMeta.maxColorCount}];
uniform float u_colorsCount;
uniform float u_distortion;
uniform float u_swirl;
uniform float u_grainMixer;
uniform float u_grainOverlay;
in vec2 v_objectUV;
out vec4 fragColor;
${declarePI}
${rotation2}
${proceduralHash21}
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = hash21(i);
float b = hash21(i + vec2(1.0, 0.0));
float c = hash21(i + vec2(0.0, 1.0));
float d = hash21(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
float noise(vec2 n, vec2 seedOffset) {
return valueNoise(n + seedOffset);
}
vec2 getPosition(int i, float t) {
float a = float(i) * .37;
float b = .6 + fract(float(i) / 3.) * .9;
float c = .8 + fract(float(i + 1) / 4.);
float x = sin(t * b + a);
float y = cos(t * c + a * 1.5);
return .5 + .5 * vec2(x, y);
}
void main() {
vec2 uv = v_objectUV;
uv += .5;
vec2 grainUV = uv * 1000.;
float mixerGrain = 0.;
if (u_grainMixer > 0.) {
mixerGrain = .4 * u_grainMixer * (noise(grainUV, vec2(0.)) - .5);
}
const float firstFrameOffset = 41.5;
float t = .5 * (u_time + firstFrameOffset);
float radius = smoothstep(0., 1., length(uv - .5));
float center = 1. - radius;
for (float i = 1.; i <= 2.; i++) {
uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y));
uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));
}
vec2 uvRotated = uv;
uvRotated -= vec2(.5);
float angle = 3. * u_swirl * radius;
uvRotated = rotate(uvRotated, -angle);
uvRotated += vec2(.5);
vec3 color = vec3(0.);
float opacity = 0.;
float totalWeight = 0.;
for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {
if (i >= int(u_colorsCount)) break;
vec2 pos = getPosition(i, t) + mixerGrain;
vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
float opacityFraction = u_colors[i].a;
float dist = length(uvRotated - pos);
dist = pow(dist, 3.5);
float weight = 1. / (dist + 1e-3);
color += colorFraction * weight;
opacity += opacityFraction * weight;
totalWeight += weight;
}
color /= max(1e-4, totalWeight);
opacity /= max(1e-4, totalWeight);
if (u_grainOverlay > 0.) {
float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
grainOverlay = pow(grainOverlay, 1.3);
float grainOverlayV = grainOverlay * 2. - 1.;
vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
grainOverlayStrength = pow(grainOverlayStrength, .8);
color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
opacity += .5 * grainOverlayStrength;
}
opacity = clamp(opacity, 0., 1.);
fragColor = vec4(color, opacity);
}
`;
export interface MeshGradientUniforms extends ShaderSizingUniforms {
u_colors: vec4[];
u_colorsCount: number;
u_distortion: number;
u_swirl: number;
u_grainMixer: number;
u_grainOverlay: number;
}
export interface MeshGradientParams extends ShaderSizingParams, ShaderMotionParams {
colors?: string[];
distortion?: number;
swirl?: number;
grainMixer?: number;
grainOverlay?: number;
}
packages/shaders/src/shaders/metaballs.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, textureRandomizerR, colorBandingFix } from '../shader-utils.js';
export const metaballsMeta = {
maxColorCount: 8,
maxBallsCount: 20,
} as const;
/**
* Up to 20 colored gooey balls moving around the center and merging into smooth organic shapes.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 8 base colors in RGBA, applied to the balls in order (colors beyond u_count are unused)
* - u_colorsCount (float): Number of active colors
* - u_count (float): Number of balls, fractional values shrink the last ball (1 to 20)
* - u_size (float): Size of the balls (0 to 1)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const metaballsFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform sampler2D u_noiseTexture;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ metaballsMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_size;
uniform float u_count;
in vec2 v_objectUV;
out vec4 fragColor;
${ declarePI }
${ textureRandomizerR }
float noise(float x) {
float i = floor(x);
float f = fract(x);
float u = f * f * (3.0 - 2.0 * f);
vec2 p0 = vec2(i, 0.0);
vec2 p1 = vec2(i + 1.0, 0.0);
return mix(randomR(p0), randomR(p1), u);
}
float getBallShape(vec2 uv, vec2 c, float p) {
float s = .5 * length(uv - c);
s = 1. - clamp(s, 0., 1.);
s = pow(s, p);
return s;
}
void main() {
vec2 shape_uv = v_objectUV;
shape_uv += .5;
const float firstFrameOffset = 2503.4;
float t = .2 * (u_time + firstFrameOffset);
vec3 totalColor = vec3(0.);
float totalShape = 0.;
float totalOpacity = 0.;
for (int i = 0; i < ${ metaballsMeta.maxBallsCount }; i++) {
if (i >= int(ceil(u_count))) break;
float idxFract = float(i) / float(${ metaballsMeta.maxBallsCount });
float angle = TWO_PI * idxFract;
float speed = 1. - .2 * idxFract;
float noiseX = noise(angle * 10. + float(i) + t * speed);
float noiseY = noise(angle * 20. + float(i) - t * speed);
vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);
int safeIndex = i % int(u_colorsCount + 0.5);
vec4 ballColor = u_colors[safeIndex];
ballColor.rgb *= ballColor.a;
float sizeFrac = 1.;
if (float(i) > floor(u_count - 1.)) {
sizeFrac *= fract(u_count);
}
float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);
shape *= pow(u_size, .2);
shape = smoothstep(0., 1., shape);
totalColor += ballColor.rgb * shape;
totalShape += shape;
totalOpacity += ballColor.a * shape;
}
totalColor /= max(totalShape, 1e-4);
totalOpacity /= max(totalShape, 1e-4);
float edge_width = fwidth(totalShape);
float finalShape = smoothstep(.4, .4 + edge_width, totalShape);
vec3 color = totalColor * finalShape;
float opacity = totalOpacity * finalShape;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1. - opacity);
opacity = opacity + u_colorBack.a * (1. - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface MetaballsUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_count: number;
u_size: number;
u_noiseTexture?: HTMLImageElement;
}
export interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colors?: string[];
count?: number;
size?: number;
}
packages/shaders/src/shaders/neuro-noise.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { rotation2, colorBandingFix } from '../shader-utils.js';
/**
* A glowing, web-like structure of fluid lines and soft intersections.
* Great for creating atmospheric, organic-yet-futuristic visuals.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorFront (vec4): Graphics highlight color in RGBA
* - u_colorMid (vec4): Graphics main color in RGBA
* - u_colorBack (vec4): Background color in RGBA
* - u_brightness (float): Luminosity of the crossing points (0 to 1)
* - u_contrast (float): Sharpness of the transition between colorMid and colorBack (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
* Original algorithm: https://x.com/zozuar/status/1625182758745128981/
*/
// language=GLSL
export const neuroNoiseFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec4 u_colorFront;
uniform vec4 u_colorMid;
uniform vec4 u_colorBack;
uniform float u_brightness;
uniform float u_contrast;
in vec2 v_patternUV;
out vec4 fragColor;
${ rotation2 }
float neuroShape(vec2 uv, float t) {
vec2 sine_acc = vec2(0.);
vec2 res = vec2(0.);
float scale = 8.;
for (int j = 0; j < 15; j++) {
uv = rotate(uv, 1.);
sine_acc = rotate(sine_acc, 1.);
vec2 layer = uv * scale + float(j) + sine_acc - t;
sine_acc += sin(layer);
res += (.5 + .5 * cos(layer)) / scale;
scale *= (1.2);
}
return res.x + res.y;
}
void main() {
vec2 shape_uv = v_patternUV;
shape_uv *= .13;
float t = .5 * u_time;
float noise = neuroShape(shape_uv, t);
noise = (1. + u_brightness) * noise * noise;
noise = pow(noise, .7 + 6. * u_contrast);
noise = min(1.4, noise);
float blend = smoothstep(0.7, 1.4, noise);
vec4 frontC = u_colorFront;
frontC.rgb *= frontC.a;
vec4 midC = u_colorMid;
midC.rgb *= midC.a;
vec4 blendFront = mix(midC, frontC, blend);
float safeNoise = max(noise, 0.0);
vec3 color = blendFront.rgb * safeNoise;
float opacity = clamp(blendFront.a * safeNoise, 0., 1.);
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1. - opacity);
opacity = opacity + u_colorBack.a * (1. - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface NeuroNoiseUniforms extends ShaderSizingUniforms {
u_colorFront: [number, number, number, number];
u_colorMid: [number, number, number, number];
u_colorBack: [number, number, number, number];
u_brightness: number;
u_contrast: number;
}
export interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {
colorFront?: string;
colorMid?: string;
colorBack?: string;
brightness?: number;
contrast?: number;
}
packages/shaders/src/shaders/paper-texture.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, proceduralHash21, proceduralHash22 } from '../shader-utils.js';
export const paperTextureMeta = {
maxCrumpleCount: 15,
} as const;
/**
* Static paper-like texture built from a combination of grain, noise and multiple fold patterns.
* Works as an image filter or as a standalone texture.
*
* Fragment shader uniforms:
* - u_image (sampler2D): Optional source image texture
* - u_isImage (bool): Whether a source image was provided
* - u_imageAspectRatio (float): Aspect ratio of the source image
* - u_colorBack (vec4): Color behind the paper sheet in RGBA
* - u_colorPaper (vec4): Color of the paper sheet in RGBA
* - u_colorShadow (vec4): Color of the patterns over the paper sheet in RGBA
* - u_blending (float): Amount of image-to-paper blending, needs image (0 to 1)
* - u_distortion (float): How much the image bends with the paper surface, needs image (-1 to 1)
* - u_clip (bool): Cuts the paper sheet to the image frame, needs image
* - u_angle (float): Direction the surface is lit from in degrees, also the roughness rows direction, needs crumples, wrinkles, folds, roughnessRows or drops > 0 (0 to 360)
* - u_seed (float): Seed applied to every pattern (0 to 1000)
* - u_roughness (float): Fine grain covering the surface evenly (0 to 1)
* - u_roughnessSize (float): Scale of the roughness grain, needs roughness > 0 (0 to 1)
* - u_roughnessRows (float): Lines the roughness up into stripes, 0 = even scatter, 1 = laid-paper rows, needs roughness > 0 (0 to 1)
* - u_fiber (float): Curly thread-like noise covering the surface evenly (0 to 1)
* - u_fiberSize (float): Scale of the fiber noise, needs fiber > 0 (0 to 1)
* - u_folds (float): Straight vertical and horizontal fold lines producing ridges and valleys (0 to 1)
* - u_foldSizeX (float): Size of the vertical folds, needs folds > 0 (0 to 1)
* - u_foldSizeY (float): Size of the horizontal folds, needs folds > 0 (0 to 1)
* - u_foldOffsetX (float): Shifts the vertical folds across the surface, needs folds > 0 (0 to 1)
* - u_foldOffsetY (float): Shifts the horizontal folds across the surface, needs folds > 0 (0 to 1)
* - u_wrinkles (float): Crumple-like facets repeating across the surface (0 to 1)
* - u_wrinkleSize (float): Scale of the wrinkle facets, needs wrinkles > 0 (0 to 1)
* - u_crumples (float): A set of irregular folding lines (0 to 1)
* - u_crumpleCount (float): Number of facets in the crumple field, needs crumples > 0 (2 to 15)
* - u_drops (float): Visibility of the speckle pattern, darkens the image instead of coloring it (0 to 1)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const paperTextureFragmentShader: string = `#version 300 es
precision mediump float;
uniform sampler2D u_image;
uniform bool u_isImage;
uniform float u_imageAspectRatio;
uniform vec4 u_colorBack;
uniform vec4 u_colorPaper;
uniform vec4 u_colorShadow;
uniform float u_blending;
uniform float u_distortion;
uniform bool u_clip;
uniform float u_angle;
uniform float u_seed;
uniform float u_roughness;
uniform float u_roughnessSize;
uniform float u_roughnessRows;
uniform float u_fiber;
uniform float u_fiberSize;
uniform float u_folds;
uniform float u_foldSizeX;
uniform float u_foldSizeY;
uniform float u_foldOffsetX;
uniform float u_foldOffsetY;
uniform float u_wrinkles;
uniform float u_wrinkleSize;
uniform float u_crumples;
uniform float u_crumpleCount;
uniform float u_drops;
uniform sampler2D u_noiseTexture;
in vec2 v_imageUV;
out vec4 fragColor;
float getUvFrame(vec2 uv) {
vec2 invAA = .5 / clamp(fwidth(uv), 1e-5, .02);
vec2 lo = clamp(uv * invAA + .5, 0., 1.);
vec2 hi = clamp((1. - uv) * invAA + .5, 0., 1.);
return lo.x * hi.x * lo.y * hi.y;
}
float lst(float edge0, float edge1, float x) {
return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
}
${declarePI}
${proceduralHash21}
${proceduralHash22}
float getRoughness(vec2 p, vec2 lightDir, vec2 seedShift, float basePixel) {
vec2 u = p / vec2(2, 4);
float w = 100. * basePixel;
float eps = 4. * w;
float size = mix(3.2, .8, u_roughnessSize);
float logLac = log2(2.1);
float level = -log2(w + 1e-8) / logLac;
float baseLevel = floor(level) - 2.;
float fade = fract(level);
vec2 px = (u.x + vec2(eps, -eps)) * .1;
float py = u.y * .1;
vec2 sum = vec2(0.);
float norm = 0., amp = .5;
float freq = exp2(baseLevel * logLac);
for (int i = 0; i < 4; i++) {
float absIdx = baseLevel + float(i);
vec2 qx = size * px * freq;
float qy = size * py * freq;
float wi = 1.;
if (i == 0) wi = 1. - fade;
if (i == 3) wi = fade;
vec2 fx = fract(qx);
float fy = fract(qy);
vec2 shift = .5 + absIdx * .3 + seedShift;
float uvY = floor(qy) / 50. + shift.y;
vec2 s0a = textureLod(u_noiseTexture, fract(vec2(floor(qx.x) / 50. + shift.x, uvY)), 0.).rg;
vec2 s1a = textureLod(u_noiseTexture, fract(vec2( ceil(qx.x) / 50. + shift.x, uvY)), 0.).rg;
vec2 s0b = textureLod(u_noiseTexture, fract(vec2(floor(qx.y) / 50. + shift.x, uvY)), 0.).rg;
vec2 s1b = textureLod(u_noiseTexture, fract(vec2( ceil(qx.y) / 50. + shift.x, uvY)), 0.).rg;
vec2 ny0 = mix(vec2(s0a.r, s0b.r), vec2(s0a.g, s0b.g), fy);
vec2 ny1 = mix(vec2(s1a.r, s1b.r), vec2(s1a.g, s1b.g), fy);
vec2 n = mix(ny0, ny1, fx);
sum += amp * wi * n;
norm += amp * wi;
amp *= .8;
freq *= 2.1;
}
vec2 r = sum / norm;
float dx = .5 + r.x - r.y;
float grain = 3. * dx * dx - .7;
float rowBand = fract(dot(p, lightDir) * .05 * size);
return grain + .6 * u_roughnessRows * (rowBand - .5);
}
float getFiber(vec2 p, vec2 seedShift, float basePixel) {
float size = mix(4., 1., u_fiberSize);
float w = 50. * basePixel;
float level = -log2(w + 1e-8);
float baseLevel = floor(level) - 3.;
float fade = fract(level);
vec2 grad = vec2(0.);
float scale = 1.;
float amp = 1.;
float freq = pow(1.7, baseLevel);
for (int i = 0; i < 5; i++) {
float absIdx = baseLevel + float(i);
vec2 q = size * p * freq;
float an = absIdx * .8;
float rc = cos(an), rs = sin(an);
q = vec2(rc * q.x - rs * q.y, rs * q.x + rc * q.y);
float wi = 1.;
if (i == 0) wi = 1. - fade;
if (i == 4) wi = fade;
vec2 iq = floor(q);
vec2 fq = fract(q);
float shift = absIdx * .3;
vec4 uv = fract(vec4(iq, iq + 1.) / 50. + .5 + shift + seedShift.xyxy);
float aF = textureLod(u_noiseTexture, uv.xy, 0.).b;
float bF = textureLod(u_noiseTexture, uv.zy, 0.).b;
float cF = textureLod(u_noiseTexture, uv.xw, 0.).b;
float dF = textureLod(u_noiseTexture, uv.zw, 0.).b;
vec2 u = fq * fq * (3. - 2. * fq);
vec2 du = 8. * fq * (1. - fq);
float dx = du.x * mix(bF - aF, dF - cF, u.y);
float dy = du.y * mix(cF - aF, dF - bF, u.x);
grad += wi * amp * scale * vec2(rc * dx + rs * dy, -rs * dx + rc * dy);
scale *= 1.7;
amp *= .5;
freq *= 1.7;
}
return clamp(.333 * length(grad), 0., 1.);
}
vec2 smoothNoise(vec2 p) {
vec2 t = p * 50. - .5;
vec2 i = floor(t);
vec2 f = fract(t);
f = f * f * (3. - 2. * f);
return textureLod(u_noiseTexture, fract((i + f + .5) / vec2(50.)), 0.).rg;
}
float getDrops(vec2 uv, vec2 seedShift) {
vec2 iDropsUV = floor(uv);
vec2 fDropsUV = fract(uv);
float dropsMinDist = 1.;
for (int y = -1; y < 2; y += 1) {
for (int x = -1; x < 2; x += 1) {
vec2 neighbor = vec2(float(y), float(x));
vec2 offset = hash22(iDropsUV + neighbor + 50. * seedShift);
vec2 pos = neighbor + offset - fDropsUV;
dropsMinDist *= min(1., dot(pos, pos));
}
}
return .5 * lst(.09, .08, sqrt(sqrt(dropsMinDist)));
}
vec2 getCellTilt(float idx, float radius) {
vec2 rand = hash22(vec2(idx + 31., idx * u_seed + 17.));
float an = rand.x * TWO_PI;
return vec2(cos(an), sin(an)) * mix(.3, 1.7, rand.y * rand.y) * mix(.7, 1., radius);
}
vec2 getCrumpleDetail(vec2 uv, float freq, float shift, float basePixel, out float depth) {
depth = 0.;
vec2 v = uv * freq;
float pixel = .9 * freq * basePixel;
vec2 base = floor(v);
float n1 = 9., n2 = 9.;
vec2 s1 = vec2(0.), s2 = vec2(0.), q1 = vec2(0.), q2 = vec2(0.);
for (int y = -1; y <= 1; y++) {
for (int x = -1; x <= 1; x++) {
vec2 cell = base + vec2(float(x), float(y));
vec2 q = hash22(vec2(cell.y * 1.9 + 3.1 + shift, cell.x * 1.3 + .11 * u_seed));
float keep = .8;
if (q.y > keep) continue;
vec2 r = hash22(vec2(cell.x + .37 * u_seed + shift + 11.1, cell.y - .21 * u_seed + 5.7));
vec2 s = cell + .06 + .88 * r;
vec2 d = v - s;
float dsq = dot(d, d);
if (dsq < n1) {
n2 = n1;
s2 = s1;
q2 = q1;
n1 = dsq;
s1 = s;
q1 = q;
} else if (dsq < n2) {
n2 = dsq;
s2 = s;
q2 = q;
}
}
}
if (n1 > 8.) return vec2(0.);
float an1 = q1.x * TWO_PI, mag1 = q1.y / .8;
vec2 t1 = vec2(cos(an1), sin(an1)) * mix(.3, 1.7, mag1 * mag1);
float an2 = q2.x * TWO_PI, mag2 = q2.y / .8;
vec2 t2 = vec2(cos(an2), sin(an2)) * mix(.3, 1.7, mag2 * mag2);
vec2 span = s1 - s2;
float spanLen = max(length(span), 1e-4);
float toEdge = (n2 - n1) / (2. * spanLen);
float pair = hash21(s1 + s2 + 1.7 * abs(s1 - s2));
float pairSoft = .05 + .1 * step(pair, .4);
float b = clamp(toEdge / max(1.5 * pixel, .5 * pairSoft), 0., 1.);
b = b * b * (3. - 2. * b);
float d1 = max(sqrt(n1), 1e-4);
depth = .2 * d1;
float shoulderAmt = max(0., 1. - toEdge / .42) * b;
vec2 shoulder = vec2(0.);
if (shoulderAmt > 0.) {
float d2 = max(sqrt(n2), 1e-4);
shoulder = shoulderAmt * ((v - s2) / d2 - (v - s1) / d1);
}
vec2 mid = .5 * (t1 + t2);
return mid + (t1 - mid) * b + .9 * shoulder;
}
vec4 getCrumples(vec2 uv) {
float crumpleN = max(2., floor(u_crumpleCount + .5));
float near = 60000., nearB = 60000.;
float idx = 0., rad = 0.;
vec2 nearP = vec2(0.), nearPb = vec2(0.);
vec4 seeds[${paperTextureMeta.maxCrumpleCount}];
for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {
if (float(i) >= crumpleN) break;
vec2 rand = hash22(vec2(float(i), float(i) * u_seed));
float an = rand.x * TWO_PI;
vec2 p = vec2(cos(an), sin(an)) * rand.y;
seeds[i] = vec4(p, rand);
vec2 d = uv - p;
float dsq = dot(d, d);
if (dsq < near) {
nearB = near;
nearPb = nearP;
near = dsq;
idx = float(i);
rad = rand.y;
nearP = p;
} else if (dsq < nearB) {
nearB = dsq;
nearPb = p;
}
}
float l = sqrt(near), lb = sqrt(nearB);
vec2 dir = (uv - nearP) / max(l, 1e-4);
float edge = lst(0., .5, lb - l);
float shoulderLimit = l + .5;
vec2 tilt = getCellTilt(idx, rad);
float tiltSum = 1.;
vec2 wide = vec2(0.);
float wideSum = 0.;
float toEdge = 9., edgeSoft = 0.;
for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {
if (float(i) >= crumpleN) break;
if (float(i) == idx) continue;
vec4 seed = seeds[i];
vec2 p = seed.xy;
vec2 rand = seed.zw;
vec2 d = uv - p;
float dsq = dot(d, d);
if (dsq < shoulderLimit * shoulderLimit) {
float di = sqrt(dsq);
float shoulder = lst(.5, 0., di - l);
wide += shoulder * (d / max(di, 1e-4) - dir);
wideSum += shoulder;
}
float pairSoft = .01 + .05 * step(.2, rand.x) + .3 * rand.y;
float toBisector = (dsq - near) / (.2 * max(length(p - nearP), 1e-4));
if (toBisector < toEdge) {
toEdge = toBisector;
edgeSoft = pairSoft;
}
float w = 1. - toBisector / pairSoft;
if (w > 0.) {
w *= w;
tilt += w * getCellTilt(float(i), rand.y);
tiltSum += w;
}
}
float blend = clamp(toEdge / edgeSoft, 0., 1.);
vec2 sharp = (1. - edge) * ((uv - nearPb) / max(lb, 1e-4) - dir);
vec2 rounding = mix(sharp, wide / max(wideSum, 1.), min(2. * edgeSoft, 1.));
float radial = l / max(l + toEdge, 1e-4);
return vec4(tilt / tiltSum + rounding * blend * radial, .2 * l, edge);
}
void getFolds(vec2 coord, vec2 offset, vec2 count, vec2 noise, vec2 baseFwidth, out vec2 slope, out vec2 dark, out vec2 lift) {
vec2 g = coord * count + .5 * offset + noise;
vec2 dx = fract(g) - .5;
vec2 adx = abs(dx);
float foldRadius = .3;
vec2 t = clamp(adx / foldRadius, 0., 1.);
dark = t * t * (3. - 2. * t);
lift = 1. - t;
lift *= lift;
vec2 crease = clamp(dx / max(count * baseFwidth, 1e-5), -1., 1.);
slope = crease * (1. - dark);
vec2 lineWidth = .02 * count * mix(vec2(2.5), vec2(.8), dark.yx) + .1 * noise;
slope -= 1. - smoothstep(vec2(0.), lineWidth, adx);
}
void main() {
vec2 patternUV = (v_imageUV - .5) * vec2(u_imageAspectRatio, 1.);
float basePixel = max(length(dFdx(patternUV)), length(dFdy(patternUV)));
vec2 baseFwidth = fwidth(patternUV);
float pattern = 0.;
float crumpleDepth = 0.;
float wrinkleDepth = 0.;
float foldDepth = 0.;
float roughness = 0.;
float fiber = 0.;
float drops = 0.;
float grazing = 0.7;
float lightRad = radians(u_angle);
vec2 lightDir = vec2(sin(lightRad), -cos(lightRad));
float foldAngleInSector = mod(u_angle, 90.);
float foldLightRad = radians(u_angle - foldAngleInSector + mix(12., 78., foldAngleInSector / 90.));
vec2 foldLightDir = vec2(sin(foldLightRad), -cos(foldLightRad));
vec2 relief = vec2(0.);
vec2 foldSlope = vec2(0.);
float reliefAmount = 0.;
float foldInk = 1.;
vec2 crumpleFlow = vec2(0.);
vec2 warpNoise = vec2(0.);
if (u_crumples > 0. || u_folds > 0. || u_wrinkles > 0.) {
warpNoise = smoothNoise(patternUV * .1 + .2 + .6 * fract(.017 * u_seed)) - .5;
}
vec2 crumplesUV = (patternUV * .9) + .012 * warpNoise;
if (u_crumples > 0.) {
vec4 crumples = getCrumples(crumplesUV);
vec2 crumpleTilt = .5 * u_crumples * crumples.xy;
crumpleTilt -= .1 * max(dot(crumpleTilt, lightDir), 0.) * lightDir;
relief += crumpleTilt;
reliefAmount += .6 * u_crumples;
crumpleFlow = crumples.w * crumpleTilt;
crumpleDepth = clamp(5. * crumples.z, 0., 1.);
}
if (u_wrinkles > 0.) {
float detailFreq = mix(10., 1., u_wrinkleSize);
float detailAmp = .2;
vec2 detailGrad = vec2(0.);
float detailDepth = 0., depthSum = 0.;
for (int i = 0; i < 3; i++) {
float layerDepth;
detailGrad += detailAmp * getCrumpleDetail(crumplesUV, detailFreq, 31. * float(i), basePixel, layerDepth);
detailDepth += detailAmp * layerDepth;
depthSum += detailAmp;
detailAmp *= (.5 + .2 * detailGrad.x);
detailFreq *= 2.1;
}
vec2 detailTilt = 1.5 * u_wrinkles * detailGrad;
detailTilt -= .65 * max(dot(detailTilt, lightDir), 0.) * lightDir;
relief += detailTilt;
reliefAmount += .6 * u_wrinkles;
wrinkleDepth = clamp(5. * detailDepth / max(depthSum, 1e-4), 0., 1.);
}
if (u_folds > 0.) {
vec2 foldOffset = vec2(1. - 2. * u_foldOffsetX, 1. - 2. * u_foldOffsetY);
vec2 foldCount = vec2(mix(3., .5, u_foldSizeX), mix(3., .5, u_foldSizeY));
vec2 foldNoise = .005 * warpNoise * foldCount;
vec2 uv = patternUV + .03 * crumpleFlow;
vec2 slope, dark, lift;
getFolds(uv, foldOffset, foldCount, foldNoise, baseFwidth, slope, dark, lift);
foldSlope = u_folds * slope;
reliefAmount += 1. * u_folds;
vec2 ink = mix(vec2(.96), vec2(1.), dark);
float flatness = dark.x * dark.y;
foldInk *= mix(1., ink.x * ink.y * mix(.5, .3, flatness), u_folds);
foldDepth = u_folds * (lift.y * foldLightDir.y - lift.x * foldLightDir.x);
}
float unlit = cos(grazing);
float lit = unlit;
if (reliefAmount > 0.) {
float lightFalloff = clamp(.5 + dot(v_imageUV - .5, lightDir), 0., 1.);
float lightPower = mix(.5, 1., lightFalloff);
float slope = clamp(dot(relief, lightDir) + dot(foldSlope, foldLightDir), -1.2, 1.2);
lit = max(cos(slope + grazing), 0.);
pattern += (clamp(reliefAmount, 0., 1.) * unlit + (lit - unlit)) * foldInk * lightPower;
}
patternUV += .04 * crumpleFlow;
vec2 seedShift = floor(fract(u_seed * vec2(.7548776662, .5698402909)) * 50.) / 50.;
if (u_roughness > 0.) {
roughness = u_roughness * getRoughness(1000. * patternUV, lightDir, seedShift, basePixel);
pattern += roughness;
}
if (u_fiber > 0.) {
fiber = u_fiber * getFiber(50. * patternUV, seedShift, basePixel);
pattern += fiber;
}
if (u_drops > 0.) {
drops = u_drops * getDrops(patternUV * 10., seedShift);
}
pattern = clamp(pattern, 0., 1.);
vec3 backColor = u_colorBack.rgb * u_colorBack.a;
float backOpacity = u_colorBack.a;
vec3 baseColor = u_colorPaper.rgb * u_colorPaper.a;
float baseOpacity = u_colorPaper.a;
vec3 shadowColor = u_colorShadow.rgb * u_colorShadow.a;
float shadowOpacity = u_colorShadow.a;
float notClipped = u_clip ? .1 : 1.;
vec2 imageCenteredUV = v_imageUV - .5;
float edgeDist = 2. * max(abs(imageCenteredUV.x), abs(imageCenteredUV.y));
float wrinkleDistortion = mix(.38, .0175, smoothstep(0., 1., edgeDist));
float scaleDistortion = .15 * u_crumples * (crumpleDepth - .5) + wrinkleDistortion * u_wrinkles * (wrinkleDepth - .5) + .05 * foldDepth;
vec2 linearDistortion = notClipped * .002 * lightDir * drops;
float radialDistortion = notClipped * .02 * (roughness + fiber);
vec2 centeredUV = imageCenteredUV * (1. - u_distortion * scaleDistortion);
centeredUV -= u_distortion * linearDistortion;
vec2 imageUV = .5 + centeredUV * (1. - abs(u_distortion) * radialDistortion * dot(centeredUV, centeredUV));
vec3 color = shadowColor * pattern;
float opacity = shadowOpacity * pattern;
color += baseColor * (1. - opacity);
opacity += baseOpacity * (1. - opacity);
if (u_isImage) {
float frame = getUvFrame(imageUV);
vec4 image = texture(u_image, imageUV);
frame *= image.a;
float maxC = max(max(image.r, image.g), image.b);
float minC = min(min(image.r, image.g), image.b);
float sat = maxC > 0. ? (maxC - minC) / maxC : 0.;
float midC = image.r + image.g + image.b - maxC - minC;
float secondaryness = maxC > minC ? (midC - minC) / (maxC - minC) : 0.;
float satDampen = sat * (1. - .5 * secondaryness);
float darkDampen = 1. - dot(vec3(.2126, .7152, .0722), image.rgb);
float dampen = mix(0., .7, u_blending) * max(satDampen, darkDampen);
vec3 paper = vec3(1.) - opacity + color;
vec3 pic = image.rgb * paper * u_blending + image.rgb * (1. - u_blending);
pic = mix(pic, vec3(1.), .6 * pow(dampen, 2. + 3. * pattern));
color = mix(color, pic, frame);
opacity = frame + opacity * (1. - frame);
if (u_clip) {
color *= frame;
opacity *= frame;
}
}
color *= mix(vec3(1.), .5 * u_colorShadow.rgb, drops * shadowOpacity);
color += backColor * (1. - opacity);
opacity += backOpacity * (1. - opacity);
fragColor = vec4(color, opacity);
}
`;
export interface PaperTextureUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string | undefined;
u_isImage: boolean;
u_colorBack: [number, number, number, number];
u_colorPaper: [number, number, number, number];
u_colorShadow: [number, number, number, number];
u_blending: number;
u_distortion: number;
u_clip: boolean;
u_angle: number;
u_seed: number;
u_roughness: number;
u_roughnessSize: number;
u_roughnessRows: number;
u_fiber: number;
u_fiberSize: number;
u_folds: number;
u_foldSizeX: number;
u_foldSizeY: number;
u_foldOffsetX: number;
u_foldOffsetY: number;
u_wrinkles: number;
u_wrinkleSize: number;
u_crumples: number;
u_crumpleCount: number;
u_drops: number;
u_noiseTexture?: HTMLImageElement;
}
export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {
image?: HTMLImageElement | string;
colorBack?: string;
colorPaper?: string;
colorShadow?: string;
blending?: number;
distortion?: number;
clip?: boolean;
angle?: number;
seed?: number;
roughness?: number;
roughnessSize?: number;
roughnessRows?: number;
fiber?: number;
fiberSize?: number;
folds?: number;
foldSizeX?: number;
foldSizeY?: number;
foldOffsetX?: number;
foldOffsetY?: number;
wrinkles?: number;
wrinkleSize?: number;
crumples?: number;
crumpleCount?: number;
drops?: number;
}
packages/shaders/src/shaders/perlin-noise.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, colorBandingFix, proceduralHash11, proceduralHash21 } from '../shader-utils.js';
/**
* Classic animated 3D Perlin noise with exposed controls.
* Original algorithm: https://www.shadertoy.com/view/NlSGDz
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorFront (vec4): Foreground color in RGBA
* - u_colorBack (vec4): Background color in RGBA
* - u_proportion (float): Blend point between two colors, 0.5 = equal distribution (0 to 1)
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
* - u_octaveCount (float): Perlin noise octaves number, more octaves for more detailed patterns (1 to 8)
* - u_persistence (float): Roughness, falloff between octaves, needs octaveCount > 1 (0.3 to 1)
* - u_lacunarity (float): Frequency step, defines how compressed the pattern is, needs octaveCount > 1 (1.5 to 10)
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const perlinNoiseFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec4 u_colorFront;
uniform vec4 u_colorBack;
uniform float u_proportion;
uniform float u_softness;
uniform float u_octaveCount;
uniform float u_persistence;
uniform float u_lacunarity;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
${ proceduralHash11 }
${ proceduralHash21 }
float hash31(vec3 p) {
p = fract(p * 0.3183099) + 0.1;
p += dot(p, p.yzx + 19.19);
return fract(p.x * (p.y + p.z));
}
vec3 gradientPredefined(float hash) {
int idx = int(hash * 12.0) % 12;
if (idx == 0) return vec3(1, 1, 0);
if (idx == 1) return vec3(-1, 1, 0);
if (idx == 2) return vec3(1, -1, 0);
if (idx == 3) return vec3(-1, -1, 0);
if (idx == 4) return vec3(1, 0, 1);
if (idx == 5) return vec3(-1, 0, 1);
if (idx == 6) return vec3(1, 0, -1);
if (idx == 7) return vec3(-1, 0, -1);
if (idx == 8) return vec3(0, 1, 1);
if (idx == 9) return vec3(0, -1, 1);
if (idx == 10) return vec3(0, 1, -1);
return vec3(0, -1, -1);// idx == 11
}
float interpolateSafe(float v000, float v001, float v010, float v011,
float v100, float v101, float v110, float v111, vec3 t) {
t = clamp(t, 0.0, 1.0);
float v00 = mix(v000, v100, t.x);
float v01 = mix(v001, v101, t.x);
float v10 = mix(v010, v110, t.x);
float v11 = mix(v011, v111, t.x);
float v0 = mix(v00, v10, t.y);
float v1 = mix(v01, v11, t.y);
return mix(v0, v1, t.z);
}
vec3 fade(vec3 t) {
return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}
float perlinNoise(vec3 position, float seed) {
position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);
vec3 i = floor(position);
vec3 f = fract(position);
float h000 = hash31(i);
float h001 = hash31(i + vec3(0, 0, 1));
float h010 = hash31(i + vec3(0, 1, 0));
float h011 = hash31(i + vec3(0, 1, 1));
float h100 = hash31(i + vec3(1, 0, 0));
float h101 = hash31(i + vec3(1, 0, 1));
float h110 = hash31(i + vec3(1, 1, 0));
float h111 = hash31(i + vec3(1, 1, 1));
vec3 g000 = gradientPredefined(h000);
vec3 g001 = gradientPredefined(h001);
vec3 g010 = gradientPredefined(h010);
vec3 g011 = gradientPredefined(h011);
vec3 g100 = gradientPredefined(h100);
vec3 g101 = gradientPredefined(h101);
vec3 g110 = gradientPredefined(h110);
vec3 g111 = gradientPredefined(h111);
float v000 = dot(g000, f - vec3(0, 0, 0));
float v001 = dot(g001, f - vec3(0, 0, 1));
float v010 = dot(g010, f - vec3(0, 1, 0));
float v011 = dot(g011, f - vec3(0, 1, 1));
float v100 = dot(g100, f - vec3(1, 0, 0));
float v101 = dot(g101, f - vec3(1, 0, 1));
float v110 = dot(g110, f - vec3(1, 1, 0));
float v111 = dot(g111, f - vec3(1, 1, 1));
vec3 u = fade(f);
return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);
}
float p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {
float value = 0.0;
float amplitude = 1.0;
float frequency = 10.0;
octaveCount = clamp(octaveCount, 1, 8);
for (int i = 0; i < octaveCount; i++) {
float seed = float(i) * 0.7319;
value += perlinNoise(position * frequency, seed) * amplitude;
amplitude *= persistence;
frequency *= lacunarity;
}
return value;
}
float get_max_amp(float persistence, float octaveCount) {
persistence = clamp(persistence * 0.999, 0.0, 0.999);
octaveCount = clamp(octaveCount, 1.0, 8.0);
return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));
}
void main() {
vec2 uv = v_patternUV;
uv *= .5;
float t = .2 * u_time;
vec3 p = vec3(uv, t);
float octCount = floor(u_octaveCount);
float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);
float max_amp = get_max_amp(u_persistence, octCount);
float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);
float sharpness = clamp(u_softness, 0., 1.);
float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);
float res = smoothstep(
.5 - .5 * sharpness - smooth_w,
.5 + .5 * sharpness + smooth_w,
noise_normalized
);
vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
float fgOpacity = u_colorFront.a;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
float bgOpacity = u_colorBack.a;
vec3 color = fgColor * res;
float opacity = fgOpacity * res;
color += bgColor * (1. - opacity);
opacity += bgOpacity * (1. - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
u_colorFront: [number, number, number, number];
u_colorBack: [number, number, number, number];
u_proportion: number;
u_softness: number;
u_octaveCount: number;
u_persistence: number;
u_lacunarity: number;
}
export interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {
colorFront?: string;
colorBack?: string;
proportion?: number;
softness?: number;
octaveCount?: number;
persistence?: number;
lacunarity?: number;
}
packages/shaders/src/shaders/pulsing-border.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, textureRandomizerGB, colorBandingFix } from '../shader-utils.js';
export const pulsingBorderMeta = {
maxColorCount: 5,
maxSpots: 4,
} as const;
/**
* Luminous trails of color merging into a glowing gradient contour.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 5 spot colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_roundness (float): Border radius (0 to 1)
* - u_thickness (float): Border base width (0 to 1)
* - u_softness (float): Border edge sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
* - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)
* - u_marginRight (float): Distance from the right edge to the effect (0 to 1)
* - u_marginTop (float): Distance from the top edge to the effect (0 to 1)
* - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)
* - u_aspectRatio (float): Aspect ratio mode (0 = auto, 1 = square)
* - u_intensity (float): Thickness of individual color spots (0 to 1)
* - u_bloom (float): Power of glow, 0 = normal blending, 1 = additive blending (0 to 1)
* - u_spots (float): Number of spots added for each color (1 to 4)
* - u_spotSize (float): Angular size of spots (0 to 1)
* - u_pulse (float): Optional pulsing animation intensity (0 to 1)
* - u_smoke (float): Optional noisy shape extending the border (0 to 1)
* - u_smokeSize (float): Size of the smoke effect, needs smoke > 0 (0 to 1)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio
* - v_responsiveBoxGivenSize (vec2): Given size of the responsive bounding box
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for smoke calculation)
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const pulsingBorderFragmentShader: string = `#version 300 es
precision lowp float;
uniform float u_time;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ pulsingBorderMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_roundness;
uniform float u_thickness;
uniform float u_marginLeft;
uniform float u_marginRight;
uniform float u_marginTop;
uniform float u_marginBottom;
uniform float u_aspectRatio;
uniform float u_softness;
uniform float u_intensity;
uniform float u_bloom;
uniform float u_spotSize;
uniform float u_spots;
uniform float u_pulse;
uniform float u_smoke;
uniform float u_smokeSize;
uniform sampler2D u_noiseTexture;
in vec2 v_responsiveUV;
in vec2 v_responsiveBoxGivenSize;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
float beat(float time) {
float first = pow(abs(sin(time * TWO_PI)), 10.);
float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);
return clamp(first + 0.6 * second, 0.0, 1.0);
}
float sst(float edge0, float edge1, float x) {
return smoothstep(edge0, edge1, x);
}
float roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {
float borderDistance = abs(distance);
float aa = 2. * fwidth(distance);
float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);
float cornerFadeCircles = 0.;
cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));
cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));
cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));
cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));
aa = fwidth(cornerDistance);
float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);
cornerFade *= cornerFadeCircles;
border += cornerFade;
return border;
}
${ textureRandomizerGB }
float randomG(vec2 p) {
vec2 uv = floor(p) / 100. + .5;
return texture(u_noiseTexture, fract(uv)).g;
}
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = randomG(i);
float b = randomG(i + vec2(1.0, 0.0));
float c = randomG(i + vec2(0.0, 1.0));
float d = randomG(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
void main() {
const float firstFrameOffset = 109.;
float t = 1.2 * (u_time + firstFrameOffset);
vec2 borderUV = v_responsiveUV;
float pulse = u_pulse * beat(.18 * u_time);
float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
vec2 halfSize = vec2(.5);
borderUV.x *= max(canvasRatio, 1.);
borderUV.y /= min(canvasRatio, 1.);
halfSize.x *= max(canvasRatio, 1.);
halfSize.y /= min(canvasRatio, 1.);
float mL = u_marginLeft;
float mR = u_marginRight;
float mT = u_marginTop;
float mB = u_marginBottom;
float mX = mL + mR;
float mY = mT + mB;
if (u_aspectRatio > 0.) {
float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);
float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;
float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;
mL += freeX * 0.5;
mR += freeX * 0.5;
mT += freeY * 0.5;
mB += freeY * 0.5;
mX = mL + mR;
mY = mT + mB;
}
float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);
halfSize.x *= (1. - mX);
halfSize.y *= (1. - mY);
vec2 centerShift = vec2(
(mL - mR) * max(canvasRatio, 1.) * 0.5,
(mB - mT) / min(canvasRatio, 1.) * 0.5
);
borderUV -= centerShift;
halfSize -= mix(thickness, 0., u_softness);
float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);
vec2 d = abs(borderUV) - halfSize + radius;
float outsideDistance = length(max(d, .0001)) - radius;
float insideDistance = min(max(d.x, d.y), .0001);
float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));
float distance = outsideDistance + insideDistance;
float borderThickness = mix(thickness, 3. * thickness, u_softness);
float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);
border = pow(border, 1. + u_softness);
vec2 smokeUV = .3 * u_smokeSize * v_patternUV;
float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);
smoke -= valueNoise(3.4 * smokeUV - .5 * t);
float smokeThickness = thickness + .2;
smokeThickness = min(.4, max(smokeThickness, .1));
smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);
smoke = 30. * smoke * smoke;
smoke *= mix(0., .5, pow(u_smoke, 2.));
smoke *= mix(1., pulse, u_pulse);
smoke = clamp(smoke, 0., 1.);
border += smoke;
border = clamp(border, 0., 1.);
vec3 blendColor = vec3(0.);
float blendAlpha = 0.;
vec3 addColor = vec3(0.);
float addAlpha = 0.;
float bloom = 4. * u_bloom;
float intensity = 1. + (1. + 4. * u_softness) * u_intensity;
float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
for (int colorIdx = 0; colorIdx < ${ pulsingBorderMeta.maxColorCount }; colorIdx++) {
if (colorIdx >= int(u_colorsCount)) break;
float colorIdxF = float(colorIdx);
vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;
float a = u_colors[colorIdx].a;
for (int spotIdx = 0; spotIdx < ${ pulsingBorderMeta.maxSpots }; spotIdx++) {
if (spotIdx >= int(u_spots)) break;
float spotIdxF = float(spotIdx);
vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;
time *= mix(1., -1., step(.5, randVal.y));
float mask = .5 + .5 * mix(
sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),
cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),
step(mod(colorIdxF, 2.), .5)
);
float p = clamp(2. * u_pulse - randVal.x, 0., 1.);
mask = mix(mask, pulse, p);
float atg1 = fract(angle + time);
float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;
spotSize = mix(spotSize, .1, p);
float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));
sector *= mask;
sector *= border;
sector *= intensity;
sector = clamp(sector, 0., 1.);
vec3 srcColor = c * sector;
float srcAlpha = a * sector;
blendColor += ((1. - blendAlpha) * srcColor);
blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;
addColor += srcColor;
addAlpha += srcAlpha;
}
}
vec3 accumColor = mix(blendColor, addColor, bloom);
float accumAlpha = mix(blendAlpha, addAlpha, bloom);
accumAlpha = clamp(accumAlpha, 0., 1.);
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
vec3 color = accumColor + (1. - accumAlpha) * bgColor;
float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
${ colorBandingFix }
fragColor = vec4(color, opacity);
}`;
export interface PulsingBorderUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_roundness: number;
u_thickness: number;
u_marginLeft: number;
u_marginRight: number;
u_marginTop: number;
u_marginBottom: number;
u_aspectRatio: (typeof PulsingBorderAspectRatios)[PulsingBorderAspectRatio];
u_softness: number;
u_intensity: number;
u_bloom: number;
u_spots: number;
u_spotSize: number;
u_pulse: number;
u_smoke: number;
u_smokeSize: number;
u_noiseTexture?: HTMLImageElement;
}
export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colors?: string[];
roundness?: number;
thickness?: number;
margin?: number;
marginLeft?: number;
marginRight?: number;
marginTop?: number;
marginBottom?: number;
aspectRatio?: PulsingBorderAspectRatio;
softness?: number;
intensity?: number;
bloom?: number;
spots?: number;
spotSize?: number;
pulse?: number;
smoke?: number;
smokeSize?: number;
}
export const PulsingBorderAspectRatios = {
auto: 0,
square: 1,
} as const;
export type PulsingBorderAspectRatio = keyof typeof PulsingBorderAspectRatios;
packages/shaders/src/shaders/simplex-noise.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { simplexNoise, colorBandingFix } from '../shader-utils.js';
export const simplexNoiseMeta = {
maxColorCount: 10,
} as const;
/**
* A multi-color gradient mapped into smooth, animated curves built as a combination of 2 Simplex noises.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colors (vec4[]): Up to 10 base colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc., needs 2+ colors (1 to 10)
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient, needs 2+ colors (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const simplexNoiseFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec4 u_colors[${ simplexNoiseMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_stepsPerColor;
uniform float u_softness;
in vec2 v_patternUV;
out vec4 fragColor;
${ simplexNoise }
float getNoise(vec2 uv, float t) {
float noise = .5 * snoise(uv - vec2(0., .3 * t));
noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
return noise;
}
float steppedSmooth(float m, float steps, float softness) {
float stepT = floor(m * steps) / steps;
float f = m * steps - floor(m * steps);
float fw = steps * fwidth(m);
float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), f);
return stepT + smoothed / steps;
}
void main() {
vec2 shape_uv = v_patternUV;
shape_uv *= .1;
float t = .2 * u_time;
float shape = .5 + .5 * getNoise(shape_uv, t);
float mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
float steps = max(1., u_stepsPerColor);
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
for (int i = 1; i < ${ simplexNoiseMeta.maxColorCount }; i++) {
if (i >= int(u_colorsCount)) break;
float localM = clamp(mixer - float(i - 1), 0., 1.);
localM = steppedSmooth(localM, steps, .5 * u_softness);
vec4 c = u_colors[i];
c.rgb *= c.a;
gradient = mix(gradient, c, localM);
}
if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
float localM = mixer + 1.;
if (mixer > (u_colorsCount - 1.)) {
localM = mixer - (u_colorsCount - 1.);
}
localM = steppedSmooth(localM, steps, .5 * u_softness);
vec4 cFst = u_colors[0];
cFst.rgb *= cFst.a;
vec4 cLast = u_colors[int(u_colorsCount - 1.)];
cLast.rgb *= cLast.a;
gradient = mix(cLast, cFst, localM);
}
vec3 color = gradient.rgb;
float opacity = gradient.a;
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface SimplexNoiseUniforms extends ShaderSizingUniforms {
u_colors: vec4[];
u_colorsCount: number;
u_stepsPerColor: number;
u_softness: number;
}
export interface SimplexNoiseParams extends ShaderSizingParams, ShaderMotionParams {
colors?: string[];
stepsPerColor?: number;
softness?: number;
}
packages/shaders/src/shaders/smoke-ring.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, textureRandomizerR, colorBandingFix } from '../shader-utils.js';
export const smokeRingMeta = {
maxColorCount: 10,
maxNoiseIterations: 8,
} as const;
/**
* Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic.
*
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 10 gradient colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_thickness (float): Thickness of the ring shape (0.01 to 1)
* - u_radius (float): Radius of the ring shape (0 to 1)
* - u_innerShape (float): Ring inner fill amount, needs radius > 0 (0 to 4)
* - u_noiseIterations (float): Number of noise layers, more layers gives more details (1 to 8)
* - u_noiseScale (float): Noise frequency (0.01 to 5)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const smokeRingFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform sampler2D u_noiseTexture;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ smokeRingMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_thickness;
uniform float u_radius;
uniform float u_innerShape;
uniform float u_noiseScale;
uniform float u_noiseIterations;
in vec2 v_objectUV;
out vec4 fragColor;
${ declarePI }
${ textureRandomizerR }
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = randomR(i);
float b = randomR(i + vec2(1.0, 0.0));
float c = randomR(i + vec2(0.0, 1.0));
float d = randomR(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
vec2 fbm(vec2 n0, vec2 n1) {
vec2 total = vec2(0.0);
float amplitude = .4;
for (int i = 0; i < ${ smokeRingMeta.maxNoiseIterations }; i++) {
if (i >= int(u_noiseIterations)) break;
total.x += valueNoise(n0) * amplitude;
total.y += valueNoise(n1) * amplitude;
n0 *= 1.99;
n1 *= 1.99;
amplitude *= 0.65;
}
return total;
}
float getNoise(vec2 uv, vec2 pUv, float t) {
vec2 pUvLeft = pUv + .03 * t;
float period = max(abs(u_noiseScale * TWO_PI), 1e-6);
vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;
vec2 noise = fbm(pUvLeft, pUvRight);
return mix(noise.y, noise.x, smoothstep(-.25, .25, uv.x));
}
float getRingShape(vec2 uv) {
float radius = u_radius;
float thickness = u_thickness;
float distance = length(uv);
float ringValue = 1. - smoothstep(radius, radius + thickness, distance);
ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);
return ringValue;
}
void main() {
vec2 shape_uv = v_objectUV;
float t = u_time;
float cycleDuration = 3.;
float period2 = 2.0 * cycleDuration;
float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;
float localTime2 = fract((0.1 * t) / period2) * period2;
float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);
float atg = atan(shape_uv.y, shape_uv.x) + .001;
float l = length(shape_uv);
float radialOffset = .5 * l - inversesqrt(max(1e-4, l));
vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;
vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale;
float noise1 = getNoise(shape_uv, polar_uv1, t);
float noise2 = getNoise(shape_uv, polar_uv2, t);
float noise = mix(noise1, noise2, timeBlend);
shape_uv *= (.8 + 1.2 * noise);
float ringShape = getRingShape(shape_uv);
float mixer = ringShape * ringShape * (u_colorsCount - 1.);
int idxLast = int(u_colorsCount) - 1;
vec4 gradient = u_colors[idxLast];
gradient.rgb *= gradient.a;
for (int i = ${ smokeRingMeta.maxColorCount } - 2; i >= 0; i--) {
float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.);
vec4 c = u_colors[i];
c.rgb *= c.a;
gradient = mix(gradient, c, localT);
}
vec3 color = gradient.rgb * ringShape;
float opacity = gradient.a * ringShape;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1. - opacity);
opacity = opacity + u_colorBack.a * (1. - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface SmokeRingUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_noiseScale: number;
u_thickness: number;
u_radius: number;
u_innerShape: number;
u_noiseIterations: number;
u_noiseTexture?: HTMLImageElement;
}
export interface SmokeRingParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colors?: string[];
noiseScale?: number;
thickness?: number;
radius?: number;
innerShape?: number;
noiseIterations?: number;
}
packages/shaders/src/shaders/spiral.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { simplexNoise, declarePI, colorBandingFix } from '../shader-utils.js';
/**
* A single-colored animated spiral that morphs across a wide range of shapes -
* from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings.
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorBack (vec4): Background color in RGBA
* - u_colorFront (vec4): Foreground (ink) color in RGBA
* - u_density (float): Spacing falloff simulating perspective, 0 = flat spiral (0 to 1)
* - u_distortion (float): Power of shape distortion applied along the spiral (0 to 1)
* - u_strokeWidth (float): Thickness of spiral curve (0 to 1)
* - u_strokeTaper (float): How much stroke loses width away from center, 0 = full visibility (0 to 1)
* - u_strokeCap (float): Extra stroke width at the center, needs strokeWidth ≠ 0.5 (0 to 1)
* - u_noise (float): Noise distortion applied over the canvas, needs noiseFrequency > 0 (0 to 1)
* - u_noiseFrequency (float): Noise frequency, needs noise > 0 (0 to 1)
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
*
*/
// language=GLSL
export const spiralFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec4 u_colorBack;
uniform vec4 u_colorFront;
uniform float u_density;
uniform float u_distortion;
uniform float u_strokeWidth;
uniform float u_strokeCap;
uniform float u_strokeTaper;
uniform float u_noise;
uniform float u_noiseFrequency;
uniform float u_softness;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
${ simplexNoise }
void main() {
vec2 uv = 2. * v_patternUV;
float t = u_time;
float l = length(uv);
float density = clamp(u_density, 0., 1.);
l = pow(max(l, 1e-6), density);
float angle = atan(uv.y, uv.x) - t;
float angleNormalised = angle / TWO_PI;
if (u_noise > 0.) {
angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);
}
float offset = l + angleNormalised;
offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t));
float stripe = fract(offset);
float shape = 2. * abs(stripe - .5);
float width = 1. - clamp(u_strokeWidth, .005 * u_strokeTaper, 1.);
float wCap = mix(width, (1. - stripe) * (1. - step(.5, stripe)), (1. - clamp(l, 0., 1.)));
width = mix(width, wCap, u_strokeCap);
width *= (1. - clamp(u_strokeTaper, 0., 1.) * l);
float fw = fwidth(offset);
float fwMult = 4. - 3. * (smoothstep(.05, .4, 2. * u_strokeWidth) * smoothstep(.05, .4, 2. * (1. - u_strokeWidth)));
float pixelSize = mix(fwMult * fw, fwidth(shape), clamp(fw, 0., 1.));
pixelSize = mix(pixelSize, .002, u_strokeCap * (1. - clamp(l, 0., 1.)));
float res = smoothstep(width - pixelSize - u_softness, width + pixelSize + u_softness, shape);
vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
float fgOpacity = u_colorFront.a;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
float bgOpacity = u_colorBack.a;
vec3 color = fgColor * res;
float opacity = fgOpacity * res;
color += bgColor * (1. - opacity);
opacity += bgOpacity * (1. - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface SpiralUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colorFront: [number, number, number, number];
u_density: number;
u_distortion: number;
u_strokeWidth: number;
u_strokeTaper: number;
u_strokeCap: number;
u_noise: number;
u_noiseFrequency: number;
u_softness: number;
}
export interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colorFront?: string;
density?: number;
distortion?: number;
strokeWidth?: number;
strokeTaper?: number;
strokeCap?: number;
noise?: number;
noiseFrequency?: number;
softness?: number;
}
packages/shaders/src/shaders/static-mesh-gradient.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import {
type ShaderSizingParams,
type ShaderSizingUniforms,
} from '../shader-sizing.js';
import { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';
export const staticMeshGradientMeta = {
maxColorCount: 10,
} as const;
/**
* Multi-point mesh gradient with up to 10 color spots, enhanced by two-direction warping,
* adjustable blend sharpness, and grain controls.
*
* Fragment shader uniforms:
* - u_colors (vec4[]): Up to 10 gradient colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_positions (float): Color spots placement seed (0 to 100)
* - u_waveX (float): Strength of sine wave distortion along X axis (0 to 1)
* - u_waveXShift (float): Phase offset applied to the X-axis wave, needs waveX > 0 (0 to 1)
* - u_waveY (float): Strength of sine wave distortion along Y axis (0 to 1)
* - u_waveYShift (float): Phase offset applied to the Y-axis wave, needs waveY > 0 (0 to 1)
* - u_mixing (float): Blending behavior, 0 = hard stripes, 0.5 = smooth, 1 = gradual blend (0 to 1)
* - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
* - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const staticMeshGradientFragmentShader: string = `#version 300 es
precision mediump float;
uniform vec4 u_colors[${ staticMeshGradientMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_positions;
uniform float u_waveX;
uniform float u_waveXShift;
uniform float u_waveY;
uniform float u_waveYShift;
uniform float u_mixing;
uniform float u_grainMixer;
uniform float u_grainOverlay;
in vec2 v_objectUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ proceduralHash21 }
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = hash21(i);
float b = hash21(i + vec2(1.0, 0.0));
float c = hash21(i + vec2(0.0, 1.0));
float d = hash21(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
float noise(vec2 n, vec2 seedOffset) {
return valueNoise(n + seedOffset);
}
vec2 getPosition(int i, float t) {
float a = float(i) * .37;
float b = .6 + mod(float(i), 3.) * .3;
float c = .8 + mod(float(i + 1), 4.) * 0.25;
float x = sin(t * b + a);
float y = cos(t * c + a * 1.5);
return .5 + .5 * vec2(x, y);
}
void main() {
vec2 uv = v_objectUV;
uv += .5;
vec2 grainUV = uv * 1000.;
float mixerGrain = 0.;
if (u_grainMixer > 0.) {
mixerGrain = .4 * u_grainMixer * (noise(grainUV, vec2(0.)) - .5);
}
float radius = smoothstep(0., 1., length(uv - .5));
float center = 1. - radius;
for (float i = 1.; i <= 2.; i++) {
uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));
uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));
}
vec3 color = vec3(0.);
float opacity = 0.;
float totalWeight = 0.;
float positionSeed = 25. + .33 * u_positions;
for (int i = 0; i < ${ staticMeshGradientMeta.maxColorCount }; i++) {
if (i >= int(u_colorsCount)) break;
vec2 pos = getPosition(i, positionSeed) + mixerGrain;
float dist = length(uv - pos);
vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
float opacityFraction = u_colors[i].a;
float mixing = pow(u_mixing, .7);
float power = mix(2., 1., mixing);
dist = pow(dist, power);
float w = 1. / (dist + 1e-3);
float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));
float sharpness = mix(baseSharpness, 1., mixing);
w = pow(w, sharpness);
color += colorFraction * w;
opacity += opacityFraction * w;
totalWeight += w;
}
color /= max(1e-4, totalWeight);
opacity /= max(1e-4, totalWeight);
if (u_grainOverlay > 0.) {
float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
grainOverlay = pow(grainOverlay, 1.3);
float grainOverlayV = grainOverlay * 2. - 1.;
vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
grainOverlayStrength = pow(grainOverlayStrength, .8);
color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
opacity += .5 * grainOverlayStrength;
}
opacity = clamp(opacity, 0., 1.);
fragColor = vec4(color, opacity);
}
`;
export interface StaticMeshGradientUniforms extends ShaderSizingUniforms {
u_colors: vec4[];
u_colorsCount: number;
u_positions: number;
u_waveX: number;
u_waveXShift: number;
u_waveY: number;
u_waveYShift: number;
u_mixing: number;
u_grainMixer: number;
u_grainOverlay: number;
}
export interface StaticMeshGradientParams extends ShaderSizingParams, ShaderMotionParams {
colors?: string[];
positions?: number;
waveX?: number;
waveXShift?: number;
waveY?: number;
waveYShift?: number;
mixing?: number;
grainMixer?: number;
grainOverlay?: number;
}
packages/shaders/src/shaders/static-radial-gradient.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import {
type ShaderSizingParams,
type ShaderSizingUniforms,
} from '../shader-sizing.js';
import { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';
export const staticRadialGradientMeta = {
maxColorCount: 10,
} as const;
/**
* Radial gradient with up to 10 blended colors, featuring advanced mixing modes, focal point controls,
* shape distortion, and grain effects.
*
* Fragment shader uniforms:
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 10 gradient colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_radius (float): Size of the shape (0 to 3)
* - u_focalDistance (float): Distance of the focal point from center (0 to 3)
* - u_focalAngle (float): Angle of the focal point in degrees, needs focalDistance > 0 (0 to 360)
* - u_falloff (float): Gradient decay, 0 = equal color distribution (-1 to 1)
* - u_mixing (float): Blending behavior, 0 = hard stripes, 1 = smooth gradient (0 to 1)
* - u_distortion (float): Strength of radial distortion (0 to 1)
* - u_distortionShift (float): Radial distortion offset, needs distortion > 0 (-1 to 1)
* - u_distortionFreq (float): Radial distortion frequency, needs distortion > 0 (0 to 20)
* - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
* - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const staticRadialGradientFragmentShader: string = `#version 300 es
precision mediump float;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ staticRadialGradientMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_radius;
uniform float u_focalDistance;
uniform float u_focalAngle;
uniform float u_falloff;
uniform float u_mixing;
uniform float u_distortion;
uniform float u_distortionShift;
uniform float u_distortionFreq;
uniform float u_grainMixer;
uniform float u_grainOverlay;
in vec2 v_objectUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ proceduralHash21 }
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = hash21(i);
float b = hash21(i + vec2(1.0, 0.0));
float c = hash21(i + vec2(0.0, 1.0));
float d = hash21(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
float noise(vec2 n, vec2 seedOffset) {
return valueNoise(n + seedOffset);
}
vec2 getPosition(int i, float t) {
float a = float(i) * .37;
float b = .6 + mod(float(i), 3.) * .3;
float c = .8 + mod(float(i + 1), 4.) * 0.25;
float x = sin(t * b + a);
float y = cos(t * c + a * 1.5);
return .5 + .5 * vec2(x, y);
}
void main() {
vec2 uv = 2. * v_objectUV;
vec2 grainUV = uv * 1000.;
vec2 center = vec2(0.);
float angleRad = -radians(u_focalAngle + 90.);
vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;
float radius = u_radius;
vec2 c_to_uv = uv - center;
vec2 f_to_uv = uv - focalPoint;
vec2 f_to_c = center - focalPoint;
float r = length(c_to_uv);
float fragAngle = atan(c_to_uv.y, c_to_uv.x);
float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;
float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));
float e0 = 0.6 * PI, e1 = halfAngle;
float lo = min(e0, e1), hi = max(e0, e1);
float s = smoothstep(lo, hi, abs(angleDiff));
float isInSector = (e1 >= e0) ? (1.0 - s) : s;
float a = dot(f_to_uv, f_to_uv);
float b = -2.0 * dot(f_to_uv, f_to_c);
float c = dot(f_to_c, f_to_c) - radius * radius;
float discriminant = b * b - 4.0 * a * c;
float t = 1.0;
if (discriminant >= 0.0) {
float sqrtD = sqrt(discriminant);
float div = max(1e-4, 2.0 * a);
float t0 = (-b - sqrtD) / div;
float t1 = (-b + sqrtD) / div;
t = max(t0, t1);
if (t < 0.0) t = 0.0;
}
float dist = length(f_to_uv);
float normalized = dist / max(1e-4, length(f_to_uv * t));
float shape = clamp(normalized, 0.0, 1.0);
float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));
float falloffExp = mix(falloffMapped, 1., shape);
shape = pow(shape, falloffExp);
shape = 1. - clamp(shape, 0., 1.);
float outerMask = .002;
float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);
outer = mix(outer, 1., isInSector);
shape = mix(0., shape, outer);
shape *= 1. - smoothstep(radius - .01, radius, r);
float angle = atan(f_to_uv.y, f_to_uv.x);
shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));
float mixerGrain = 0.;
if (u_grainMixer > 0.) {
mixerGrain = .4 * u_grainMixer * (noise(grainUV, vec2(0.)) - .5);
}
float mixer = shape * u_colorsCount + mixerGrain;
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
float outerShape = 0.;
for (int i = 1; i < ${ staticRadialGradientMeta.maxColorCount + 1 }; i++) {
if (i > int(u_colorsCount)) break;
float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);
float aa = fwidth(mLinear);
float width = min(u_mixing, 0.5);
float t = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);
float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));
float m = t < 0.5
? 0.5 * pow(2. * t, p)
: 1. - 0.5 * pow(2. * (1. - t), p);
float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);
m = mix(m, m * m, 0.5 * quadBlend);
if (i == 1) {
outerShape = m;
}
vec4 c = u_colors[i - 1];
c.rgb *= c.a;
gradient = mix(gradient, c, m);
}
vec3 color = gradient.rgb * outerShape;
float opacity = gradient.a * outerShape;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1.0 - opacity);
opacity = opacity + u_colorBack.a * (1.0 - opacity);
if (u_grainOverlay > 0.) {
float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
grainOverlay = pow(grainOverlay, 1.3);
float grainOverlayV = grainOverlay * 2. - 1.;
vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
grainOverlayStrength = pow(grainOverlayStrength, .8);
color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
opacity += .5 * grainOverlayStrength;
}
opacity = clamp(opacity, 0., 1.);
fragColor = vec4(color, opacity);
}
`;
export interface StaticRadialGradientUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_radius: number;
u_focalDistance: number;
u_focalAngle: number;
u_falloff: number;
u_mixing: number;
u_distortion: number;
u_distortionShift: number;
u_distortionFreq: number;
u_grainMixer: number;
u_grainOverlay: number;
}
export interface StaticRadialGradientParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colors?: string[];
radius?: number;
focalDistance?: number;
focalAngle?: number;
falloff?: number;
mixing?: number;
distortion?: number;
distortionShift?: number;
distortionFreq?: number;
grainMixer?: number;
grainOverlay?: number;
}
packages/shaders/src/shaders/swirl.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { simplexNoise, declarePI, rotation2, colorBandingFix } from '../shader-utils.js';
export const swirlMeta = {
maxColorCount: 10,
} as const;
/**
* Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colorBack (vec4): Background color in RGBA
* - u_colors (vec4[]): Up to 10 stripe colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_bandCount (float): Number of color bands, 0 = concentric ripples (0 to 15)
* - u_twist (float): Vortex power, 0 = straight sectoral shapes (0 to 1)
* - u_center (float): How far from the center the swirl colors begin to appear, needs twist > 0 (0 to 1)
* - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
* - u_noise (float): Strength of noise distortion, needs noiseFrequency > 0 (0 to 1)
* - u_noiseFrequency (float): Noise frequency, needs noise > 0 (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const swirlFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec4 u_colorBack;
uniform vec4 u_colors[${ swirlMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_bandCount;
uniform float u_twist;
uniform float u_center;
uniform float u_proportion;
uniform float u_softness;
uniform float u_noise;
uniform float u_noiseFrequency;
in vec2 v_objectUV;
out vec4 fragColor;
${ declarePI }
${ simplexNoise }
${ rotation2 }
void main() {
vec2 shape_uv = v_objectUV;
float l = length(shape_uv);
l = max(1e-4, l);
float t = u_time;
float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;
float angle_norm = angle / TWO_PI;
float twist = 3. * clamp(u_twist, 0., 1.);
float offset = pow(l, -twist) + angle_norm;
float shape = fract(offset);
shape = 1. - abs(2. * shape - 1.);
if (u_noise > 0.) {
shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);
}
float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist));
shape = mix(0., shape, mid);
float proportion = clamp(u_proportion, 0., 1.);
float exponent = mix(.25, 1., proportion * 2.);
exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));
shape = pow(shape, exponent);
float mixer = shape * u_colorsCount;
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
float outerShape = 0.;
for (int i = 1; i < ${ swirlMeta.maxColorCount + 1 }; i++) {
if (i > int(u_colorsCount)) break;
float m = clamp(mixer - float(i - 1), 0., 1.);
float aa = fwidth(m);
m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);
if (i == 1) {
outerShape = m;
}
vec4 c = u_colors[i - 1];
c.rgb *= c.a;
gradient = mix(gradient, c, m);
}
float midAA = .1 * fwidth(pow(l, -twist));
float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));
outerShape = mix(0., outerShape, outerMid);
vec3 color = gradient.rgb * outerShape;
float opacity = gradient.a * outerShape;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
color = color + bgColor * (1.0 - opacity);
opacity = opacity + u_colorBack.a * (1.0 - opacity);
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface SwirlUniforms extends ShaderSizingUniforms {
u_colorBack: [number, number, number, number];
u_colors: vec4[];
u_colorsCount: number;
u_bandCount: number;
u_twist: number;
u_center: number;
u_proportion: number;
u_softness: number;
u_noiseFrequency: number;
u_noise: number;
}
export interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {
colorBack?: string;
colors?: string[];
bandCount?: number;
twist?: number;
center?: number;
proportion?: number;
softness?: number;
noiseFrequency?: number;
noise?: number;
}
packages/shaders/src/shaders/voronoi.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, textureRandomizerGB } from '../shader-utils.js';
export const voronoiMeta = {
maxColorCount: 5,
} as const;
/**
* Anti-aliased animated Voronoi pattern with smooth and customizable edges.
*
* Double-pass Voronoi pattern cell edges.
* Original algorithm: https://www.shadertoy.com/view/ldl3W8
*
* Note: gaps can't be removed completely due to natural artifacts of Voronoi cells borders
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_scale (float): Overall zoom level, used for anti-aliasing calculations
* - u_colors (vec4[]): Up to 5 base cell colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc., needs 2+ colors (1 to 3)
* - u_colorGlow (vec4): Color tint for radial inner shadow inside cells in RGBA, needs glow > 0
* - u_colorGap (vec4): Color used for cell borders/gaps in RGBA
* - u_distortion (float): Strength of noise-driven displacement of cell centers (0 to 0.5)
* - u_gap (float): Width of the border/gap between cells (0 to 0.1)
* - u_glow (float): Strength of the radial inner shadow inside cells, needs colorGlow alpha > 0 (0 to 1)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const voronoiFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform float u_scale;
uniform sampler2D u_noiseTexture;
uniform vec4 u_colors[${ voronoiMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_stepsPerColor;
uniform vec4 u_colorGlow;
uniform vec4 u_colorGap;
uniform float u_distortion;
uniform float u_gap;
uniform float u_glow;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
${ textureRandomizerGB }
vec4 voronoi(vec2 x, float t) {
vec2 ip = floor(x);
vec2 fp = fract(x);
vec2 mg, mr;
float md = 8.;
float rand = 0.;
for (int j = -1; j <= 1; j++) {
for (int i = -1; i <= 1; i++) {
vec2 g = vec2(float(i), float(j));
vec2 o = randomGB(ip + g);
float raw_hash = o.x;
o = .5 + u_distortion * sin(t + TWO_PI * o);
vec2 r = g + o - fp;
float d = dot(r, r);
if (d < md) {
md = d;
mr = r;
mg = g;
rand = raw_hash;
}
}
}
md = 8.;
for (int j = -2; j <= 2; j++) {
for (int i = -2; i <= 2; i++) {
vec2 g = mg + vec2(float(i), float(j));
vec2 o = randomGB(ip + g);
o = .5 + u_distortion * sin(t + TWO_PI * o);
vec2 r = g + o - fp;
if (dot(mr - r, mr - r) > .00001) {
md = min(md, dot(.5 * (mr + r), normalize(r - mr)));
}
}
}
return vec4(md, mr, rand);
}
void main() {
vec2 shape_uv = v_patternUV;
shape_uv *= 1.25;
float t = u_time;
vec4 voronoiRes = voronoi(shape_uv, t);
float shape = clamp(voronoiRes.w, 0., 1.);
float mixer = shape * (u_colorsCount - 1.);
mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
float steps = max(1., u_stepsPerColor);
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
for (int i = 1; i < ${ voronoiMeta.maxColorCount }; i++) {
if (i >= int(u_colorsCount)) break;
float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
localT = round(localT * steps) / steps;
vec4 c = u_colors[i];
c.rgb *= c.a;
gradient = mix(gradient, c, localT);
}
if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
float localT = mixer + 1.;
if (mixer > (u_colorsCount - 1.)) {
localT = mixer - (u_colorsCount - 1.);
}
localT = round(localT * steps) / steps;
vec4 cFst = u_colors[0];
cFst.rgb *= cFst.a;
vec4 cLast = u_colors[int(u_colorsCount - 1.)];
cLast.rgb *= cLast.a;
gradient = mix(cLast, cFst, localT);
}
vec3 cellColor = gradient.rgb;
float cellOpacity = gradient.a;
float glows = length(voronoiRes.yz * u_glow);
glows = pow(glows, 1.5);
vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);
float opacity = cellOpacity + u_colorGlow.a * glows;
float edge = voronoiRes.x;
float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);
edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);
color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);
opacity = mix(u_colorGap.a, opacity, edge);
fragColor = vec4(color, opacity);
}
`;
export interface VoronoiUniforms extends ShaderSizingUniforms {
u_colors: vec4[];
u_colorsCount: number;
u_stepsPerColor: number;
u_colorGap: [number, number, number, number];
u_colorGlow: [number, number, number, number];
u_distortion: number;
u_gap: number;
u_glow: number;
u_noiseTexture?: HTMLImageElement;
}
export interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {
colors?: string[];
stepsPerColor?: number;
colorGap?: string;
colorGlow?: string;
distortion?: number;
gap?: number;
glow?: number;
}
packages/shaders/src/shaders/warp.ts
import type { vec4 } from '../types.js';
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, rotation2, colorBandingFix } from '../shader-utils.js';
export const warpMeta = {
maxColorCount: 10,
} as const;
/**
* Animated color fields warped by noise and swirls, applied over base patterns
* (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution,
* softness, distortion, and swirl. Great for fluid, smoky, or marbled effects.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_colors (vec4[]): Up to 10 gradient colors in RGBA
* - u_colorsCount (float): Number of active colors
* - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
* - u_shape (float): Base pattern type (0 = checks, 1 = stripes, 2 = edge)
* - u_shapeScale (float): Zoom level of the base pattern (0 to 1)
* - u_distortion (float): Strength of noise-based distortion (0 to 1)
* - u_swirl (float): Strength of the swirl distortion, needs swirlIterations > 1 (0 to 1)
* - u_swirlIterations (float): Number of layered swirl passes as an integer, needs swirl > 0 (2 to 20)
* - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const warpFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform sampler2D u_noiseTexture;
uniform vec4 u_colors[${ warpMeta.maxColorCount }];
uniform float u_colorsCount;
uniform float u_proportion;
uniform float u_softness;
uniform float u_shape;
uniform float u_shapeScale;
uniform float u_distortion;
uniform float u_swirl;
uniform float u_swirlIterations;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
float randomG(vec2 p) {
vec2 uv = floor(p) / 100. + .5;
return texture(u_noiseTexture, fract(uv)).g;
}
float valueNoise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = randomG(i);
float b = randomG(i + vec2(1.0, 0.0));
float c = randomG(i + vec2(0.0, 1.0));
float d = randomG(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
float x1 = mix(a, b, u.x);
float x2 = mix(c, d, u.x);
return mix(x1, x2, u.y);
}
void main() {
vec2 uv = v_patternUV;
uv *= .5;
const float firstFrameOffset = 118.;
float t = 0.0625 * (u_time + firstFrameOffset);
float n1 = valueNoise(uv * 1. + t);
float n2 = valueNoise(uv * 2. - t);
float angle = n1 * TWO_PI;
uv.x += 4. * u_distortion * n2 * cos(angle);
uv.y += 4. * u_distortion * n2 * sin(angle);
float swirl = u_swirl;
for (int i = 1; i <= 20; i++) {
if (i >= int(u_swirlIterations)) break;
float iFloat = float(i);
uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);
uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);
}
float proportion = clamp(u_proportion, 0., 1.);
float shape = 0.;
if (u_shape < .5) {
vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);
shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);
shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
} else if (u_shape < 1.5) {
vec2 stripesShape_uv = uv * (2. * u_shapeScale);
float f = fract(stripesShape_uv.y);
shape = smoothstep(.0, .55, f) * (1.0 - smoothstep(.45, 1., f));
shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
} else {
float shapeScaling = 5. * (1. - u_shapeScale);
float e0 = 0.45 - shapeScaling;
float e1 = 0.55 + shapeScaling;
shape = smoothstep(min(e0, e1), max(e0, e1), 1.0 - uv.y + 0.3 * (proportion - 0.5));
}
float mixer = shape * (u_colorsCount - 1.);
vec4 gradient = u_colors[0];
gradient.rgb *= gradient.a;
float aa = fwidth(shape);
for (int i = 1; i < ${ warpMeta.maxColorCount }; i++) {
if (i >= int(u_colorsCount)) break;
float m = clamp(mixer - float(i - 1), 0.0, 1.0);
float localMixerStart = floor(m);
float softness = .5 * u_softness + fwidth(m);
float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);
float stepped = localMixerStart + smoothed;
m = mix(stepped, m, u_softness);
vec4 c = u_colors[i];
c.rgb *= c.a;
gradient = mix(gradient, c, m);
}
vec3 color = gradient.rgb;
float opacity = gradient.a;
${ colorBandingFix }
fragColor = vec4(color, opacity);
}
`;
export interface WarpUniforms extends ShaderSizingUniforms {
u_colors: vec4[];
u_colorsCount: number;
u_proportion: number;
u_softness: number;
u_shape: (typeof WarpPatterns)[WarpPattern];
u_shapeScale: number;
u_distortion: number;
u_swirl: number;
u_swirlIterations: number;
u_noiseTexture?: HTMLImageElement;
}
export interface WarpParams extends ShaderSizingParams, ShaderMotionParams {
colors?: string[];
proportion?: number;
softness?: number;
shape?: WarpPattern;
shapeScale?: number;
distortion?: number;
swirl?: number;
swirlIterations?: number;
}
export const WarpPatterns = {
checks: 0,
stripes: 1,
edge: 2,
} as const;
export type WarpPattern = keyof typeof WarpPatterns;
packages/shaders/src/shaders/water.ts
import type { ShaderMotionParams } from '../shader-mount.js';
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
/**
* Water-like surface distortion with natural caustic realism. Works as an image filter or standalone animated texture.
*
* Fragment shader uniforms:
* - u_time (float): Animation time
* - u_image (sampler2D): Optional source image texture
* - u_imageAspectRatio (float): Aspect ratio of the source image
* - u_colorBack (vec4): Background color in RGBA
* - u_colorHighlight (vec4): Highlight color in RGBA, needs highlights > 0
* - u_highlights (float): Coloring added over image/background following caustic shape, needs colorHighlight alpha > 0 (0 to 1)
* - u_layering (float): Power of 2nd layer of caustic distortion, needs caustic or highlights > 0 (0 to 1)
* - u_edges (float): Caustic distortion power on the image edges, needs image and caustic > 0 (0 to 1)
* - u_waves (float): Additional distortion based on simplex noise, independent from caustic (0 to 1)
* - u_caustic (float): Power of caustic distortion, needs image (0 to 1)
* - u_size (float): Pattern scale relative to the image (0.01 to 7)
*
* Vertex shader outputs (used in fragment shader):
* - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
* - u_imageAspectRatio (float): Aspect ratio of the source image
*
*/
// language=GLSL
export const waterFragmentShader: string = `#version 300 es
precision mediump float;
uniform float u_time;
uniform vec4 u_colorBack;
uniform vec4 u_colorHighlight;
uniform sampler2D u_image;
uniform float u_imageAspectRatio;
uniform float u_size;
uniform float u_highlights;
uniform float u_layering;
uniform float u_edges;
uniform float u_caustic;
uniform float u_waves;
in vec2 v_imageUV;
out vec4 fragColor;
${ declarePI }
${ rotation2 }
${ simplexNoise }
float getUvFrame(vec2 uv) {
float aax = 2. * fwidth(uv.x);
float aay = 2. * fwidth(uv.y);
float left = smoothstep(0., aax, uv.x);
float right = 1.0 - smoothstep(1. - aax, 1., uv.x);
float bottom = smoothstep(0., aay, uv.y);
float top = 1.0 - smoothstep(1. - aay, 1., uv.y);
return left * right * bottom * top;
}
mat2 rotate2D(float r) {
return mat2(cos(r), sin(r), -sin(r), cos(r));
}
float getCausticNoise(vec2 uv, float t, float scale) {
vec2 n = vec2(.1);
vec2 N = vec2(.1);
mat2 m = rotate2D(.5);
for (int j = 0; j < 6; j++) {
uv *= m;
n *= m;
vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;
n += sin(q);
N += cos(q) / scale;
scale *= 1.1;
}
return (N.x + N.y + 1.);
}
void main() {
vec2 imageUV = v_imageUV;
vec2 patternUV = v_imageUV - .5;
patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));
patternUV /= (.01 + .09 * u_size);
float t = u_time;
float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));
float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);
if (u_layering > 0.) {
causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
}
causticNoise = causticNoise * causticNoise;
float edgesDistortion = smoothstep(0., .1, imageUV.x);
edgesDistortion *= smoothstep(0., .1, imageUV.y);
edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));
edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));
edgesDistortion = mix(edgesDistortion, 1., u_edges);
float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;
float wavesDistortion = .1 * u_waves * wavesNoise;
imageUV += vec2(wavesDistortion, -wavesDistortion);
imageUV += (u_caustic * causticNoiseDistortion);
float frame = getUvFrame(imageUV);
vec4 image = texture(u_image, imageUV);
vec4 backColor = u_colorBack;
backColor.rgb *= backColor.a;
vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);
float opacity = backColor.a + image.a * frame;
causticNoise = max(-.2, causticNoise);
float hightlight = .025 * u_highlights * causticNoise;
hightlight *= u_colorHighlight.a;
color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise * u_colorHighlight.a);
opacity += hightlight;
color += hightlight * (.5 + .5 * wavesNoise);
opacity += hightlight * (.5 + .5 * wavesNoise);
opacity = clamp(opacity, 0., 1.);
fragColor = vec4(color, opacity);
}
`;
export interface WaterUniforms extends ShaderSizingUniforms {
u_image: HTMLImageElement | string | undefined;
u_colorBack: [number, number, number, number];
u_colorHighlight: [number, number, number, number];
u_highlights: number;
u_layering: number;
u_edges: number;
u_caustic: number;
u_waves: number;
u_size: number;
}
export interface WaterParams extends ShaderSizingParams, ShaderMotionParams {
image?: HTMLImageElement | string;
colorBack?: string;
colorHighlight?: string;
highlights?: number;
layering?: number;
edges?: number;
caustic?: number;
waves?: number;
size?: number;
}
packages/shaders/src/shaders/waves.ts
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
import { declarePI } from '../shader-utils.js';
/**
* Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.
*
* Fragment shader uniforms:
* - u_colorFront (vec4): Foreground color in RGBA
* - u_colorBack (vec4): Background color in RGBA
* - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes, needs amplitude > 0, frequency > 0 (0 to 3)
* - u_amplitude (float): Wave amplitude, at frequency = 0 it only shifts the lines (0 to 1)
* - u_frequency (float): Wave frequency, needs amplitude > 0 (0 to 2)
* - u_spacing (float): Space between every two wavy lines (0 to 2)
* - u_proportion (float): Blend point between front and back colors, 0.5 = equal distribution (0 to 1)
* - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
*
* Vertex shader outputs (used in fragment shader):
* - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
*
* Vertex shader uniforms:
* - u_resolution (vec2): Canvas resolution in pixels
* - u_pixelRatio (float): Device pixel ratio
* - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
* - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
* - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
* - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
* - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
* - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
* - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
* - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
* - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
*
*/
// language=GLSL
export const wavesFragmentShader: string = `#version 300 es
precision mediump float;
uniform vec4 u_colorFront;
uniform vec4 u_colorBack;
uniform float u_shape;
uniform float u_frequency;
uniform float u_amplitude;
uniform float u_spacing;
uniform float u_proportion;
uniform float u_softness;
in vec2 v_patternUV;
out vec4 fragColor;
${ declarePI }
void main() {
vec2 shape_uv = v_patternUV;
shape_uv *= 4.;
float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);
float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);
float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);
float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));
float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));
offset = mix(offset, irregular, smoothstep(1., 2., u_shape));
offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));
offset *= 2. * u_amplitude;
float spacing = (.001 + u_spacing);
float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);
float aa = .0001 + fwidth(shape);
float dc = 1. - clamp(u_proportion, 0., 1.);
float e0 = dc - u_softness - aa;
float e1 = dc + u_softness + aa;
float res = smoothstep(min(e0, e1), max(e0, e1), shape);
vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
float fgOpacity = u_colorFront.a;
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
float bgOpacity = u_colorBack.a;
vec3 color = fgColor * res;
float opacity = fgOpacity * res;
color += bgColor * (1. - opacity);
opacity += bgOpacity * (1. - opacity);
fragColor = vec4(color, opacity);
}
`;
export interface WavesUniforms extends ShaderSizingUniforms {
u_colorFront: [number, number, number, number];
u_colorBack: [number, number, number, number];
u_shape: number;
u_frequency: number;
u_amplitude: number;
u_spacing: number;
u_proportion: number;
u_softness: number;
}
export interface WavesParams extends ShaderSizingParams {
colorFront?: string;
colorBack?: string;
rotation?: number;
shape?: number;
frequency?: number;
amplitude?: number;
spacing?: number;
proportion?: number;
softness?: number;
}
packages/shaders/src/types.ts
export type vec4 = [number, number, number, number];
export type vec3 = [number, number, number];
export type vec2 = [number, number];
packages/shaders/src/vertex-shader.ts
/** Vertex shader for the shader mount */
// language=GLSL
export const vertexShaderSource = `#version 300 es
precision mediump float;
layout(location = 0) in vec4 a_position;
uniform vec2 u_resolution;
uniform float u_pixelRatio;
uniform float u_imageAspectRatio;
uniform float u_originX;
uniform float u_originY;
uniform float u_worldWidth;
uniform float u_worldHeight;
uniform float u_fit;
uniform float u_scale;
uniform float u_rotation;
uniform float u_offsetX;
uniform float u_offsetY;
out vec2 v_objectUV;
out vec2 v_objectBoxSize;
out vec2 v_responsiveUV;
out vec2 v_responsiveBoxGivenSize;
out vec2 v_patternUV;
out vec2 v_patternBoxSize;
out vec2 v_imageUV;
vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {
vec2 box = vec2(0.);
// fit = none
box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);
float noFitBoxWidth = box.x;
if (u_fit == 1.) { // fit = contain
box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);
} else if (u_fit == 2.) { // fit = cover
box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);
}
box.y = box.x / boxRatio;
return vec3(box, noFitBoxWidth);
}
void main() {
gl_Position = a_position;
vec2 uv = gl_Position.xy * .5;
vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
float r = u_rotation * 3.14159265358979323846 / 180.;
mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
// ===================================================
float fixedRatio = 1.;
vec2 fixedRatioBoxGivenSize = vec2(
(u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
(u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
);
v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy;
vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;
v_objectUV = uv;
v_objectUV *= objectWorldScale;
v_objectUV += boxOrigin * (objectWorldScale - 1.);
v_objectUV += graphicOffset;
v_objectUV /= u_scale;
v_objectUV = graphicRotation * v_objectUV;
// ===================================================
v_responsiveBoxGivenSize = vec2(
(u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
(u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
);
float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;
vec2 responsiveBoxScale = u_resolution.xy / responsiveBoxSize;
#ifdef ADD_HELPERS
v_responsiveHelperBox = uv;
v_responsiveHelperBox *= responsiveBoxScale;
v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);
#endif
v_responsiveUV = uv;
v_responsiveUV *= responsiveBoxScale;
v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);
v_responsiveUV += graphicOffset;
v_responsiveUV /= u_scale;
v_responsiveUV.x *= responsiveRatio;
v_responsiveUV = graphicRotation * v_responsiveUV;
v_responsiveUV.x /= responsiveRatio;
// ===================================================
float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
vec2 patternBoxGivenSize = vec2(
(u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
(u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
);
patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);
v_patternBoxSize = boxSizeData.xy;
float patternBoxNoFitBoxWidth = boxSizeData.z;
vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
v_patternUV = uv;
v_patternUV += graphicOffset / patternBoxScale;
v_patternUV += boxOrigin;
v_patternUV -= boxOrigin / patternBoxScale;
v_patternUV *= u_resolution.xy;
v_patternUV /= u_pixelRatio;
if (u_fit > 0.) {
v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
}
v_patternUV /= u_scale;
v_patternUV = graphicRotation * v_patternUV;
v_patternUV += boxOrigin / patternBoxScale;
v_patternUV -= boxOrigin;
// x100 is a default multiplier between vertex and fragmant shaders
// we use it to avoid UV presision issues
v_patternUV *= .01;
// ===================================================
vec2 imageBoxSize;
if (u_fit == 1.) { // contain
imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
} else if (u_fit == 2.) { // cover
imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
} else {
imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
}
imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
v_imageUV = uv;
v_imageUV *= imageBoxScale;
v_imageUV += boxOrigin * (imageBoxScale - 1.);
v_imageUV += graphicOffset;
v_imageUV /= u_scale;
v_imageUV.x *= u_imageAspectRatio;
v_imageUV = graphicRotation * v_imageUV;
v_imageUV.x /= u_imageAspectRatio;
v_imageUV += .5;
v_imageUV.y = 1. - v_imageUV.y;
}`;
LICENSE
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
package.json
{
"name": "paper-shaders",
"private": true,
"version": "0.0.0",
"license": "Apache-2.0",
"workspaces": [
"docs",
"packages/shaders",
"packages/shaders-react"
],
"scripts": {
"build": "bun run build.js",
"publish-all": "run-s clean build && bun run publish.js",
"publish-canary": "run-s clean build && bun run publish.js --canary",
"publish-all-test": "run-s clean build && bun run publish.js --dry-run",
"dev:docs": "bun run --filter docs dev",
"dev:packages": "nodemon --watch 'packages/*/src/**/*' --ext ts,tsx --exec 'bun run build' --on-change-only",
"dev": "run-s clean build && run-p dev:*",
"clean": "rimraf packages/*/dist"
},
"devDependencies": {
"@types/bun": "^1.1.11",
"esbuild": "^0.24.0",
"nodemon": "^3.1.7",
"npm-run-all": "^4.1.5",
"glob": "^11.0.1",
"prettier": "^3.4.2",
"prettier-plugin-tailwindcss": "^0.6.14",
"rimraf": "^6.0.1",
"typescript": "^5.6.3"
},
"patchedDependencies": {
"leva@0.9.34": "patches/leva@0.9.34.patch"
}
}
packages/shaders/package.json
{
"name": "@paper-design/shaders",
"version": "0.0.81",
"license": "Apache-2.0",
"type": "module",
"sideEffects": false,
"publishConfig": {
"access": "public"
},
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"default": "./dist/index.js"
}
},
"files": [
"dist",
"LICENSE",
"NOTICE"
],
"scripts": {
"type-check": "tsc --project tsconfig.json"
},
"dependencies": {}
}
packages/shaders-react/package.json
{
"name": "@paper-design/shaders-react",
"version": "0.0.81",
"license": "Apache-2.0",
"type": "module",
"sideEffects": false,
"publishConfig": {
"access": "public"
},
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"default": "./dist/index.js"
}
},
"files": [
"dist",
"LICENSE",
"NOTICE"
],
"scripts": {
"type-check": "tsc --project tsconfig.json"
},
"dependencies": {
"@paper-design/shaders": "0.0.81"
},
"devDependencies": {
"@types/react": "19.1.0"
},
"peerDependencies": {
"@types/react": "^18 || ^19",
"react": "^18 || ^19"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
}Usage.tsx실행 안내·자료
// lens distortion; original modules at revision 43cd68db79fa0b1759f72ffc941b3238e2a3954c.
import {LensDistortionExample as Demo} from "./docs/registry/lens-distortion-example.tsx";
export default function Example() { return <Demo image="./docs/public/images/image-filters/0018.webp" />; }
README.md실행 안내·자료
# lens distortion
This is the original paper-shaders implementation and an original demo from revision `43cd68db79fa0b1759f72ffc941b3238e2a3954c`. Code license: Apache-2.0. Preserve the included license and NOTICE when reusing it.
Download the standalone HTML to run the fully bundled preview locally. It embeds JavaScript, CSS, and its required media. For source integration, use the original implementation and demo paths shown in Usage.tsx. Magic UI needs React 19, Tailwind CSS 4, its included globals.css, and the packages imported by the selected component. Resolve @/ to apps/www. Paper Shaders needs React and both original packages; resolve @paper-design/shaders-react and @paper-design/shaders to their packages/*/src/index.ts entries. The original package manifests and all local import dependencies are supplied alongside the source.
The gallery host uses an opaque sandbox with allow-scripts. It keeps theme state in memory, accepts ?theme=light or ?theme=dark, disables navigation and form submission, and uses native elements for Next image/link host imports. It does not use cookies, origin storage, remote requests, or provider application code.
- Passed the exact image default from the original docs page as a data URL.
Remote sample-media snapshots have their own provenance in external-assets.json; the code license does not assert ownership of that media. Compilation alone is not browser verification.
THIRD_PARTY_LICENSES.txt실행 안내·자료
@date-fns/tz@1.5.0 (MIT)
MIT License
Copyright © 2024 Sasha Koss
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
@floating-ui/core@1.8.0 (MIT)
MIT License
Copyright (c) 2021-present Floating UI contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
@floating-ui/dom@1.8.0 (MIT)
MIT License
Copyright (c) 2021-present Floating UI contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
@floating-ui/react-dom@2.1.9 (MIT)
MIT License
Copyright (c) 2021-present Floating UI contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
@floating-ui/utils@0.2.12 (MIT)
MIT License
Copyright (c) 2021-present Floating UI contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
@radix-ui/number@1.1.1 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/primitive@1.1.3 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-accordion@1.2.12 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-arrow@1.1.7 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-collapsible@1.1.12 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-collection@1.1.7 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-compose-refs@1.1.2 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-context@1.1.2 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-direction@1.1.1 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-dismissable-layer@1.1.11 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-icons@1.3.2 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-id@1.1.1 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-label@2.1.7 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-popper@1.2.8 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-portal@1.1.9 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-presence@1.1.5 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-primitive@2.1.3 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-scroll-area@1.2.10 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-separator@1.1.7 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-slot@1.2.3 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-tooltip@1.2.8 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-use-callback-ref@1.1.1 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-use-controllable-state@1.2.2 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-use-effect-event@0.0.2 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-use-escape-keydown@1.1.1 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-use-layout-effect@1.1.1 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-use-size@1.1.1 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@radix-ui/react-visually-hidden@1.2.3 (MIT)
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/core@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/engine-javascript@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/engine-oniguruma@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/langs@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/themes@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/transformers@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/types@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
@shikijs/vscode-textmate@10.0.2 (MIT)
The MIT License (MIT)
Copyright (c) Microsoft Corporation
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
canvas-confetti@1.9.3 (ISC)
ISC License
Copyright (c) 2020, Kiril Vatev
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
========================================================================
ccount@2.0.1 (MIT)
(The MIT License)
Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
character-entities-html4@2.1.0 (MIT)
(The MIT License)
Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
character-entities-legacy@3.0.0 (MIT)
(The MIT License)
Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
class-variance-authority@0.7.1 (Apache-2.0)
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
Copyright 2022 Joe Bell
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
========================================================================
clsx@2.1.1 (MIT)
MIT License
Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
cobe@0.6.4 (MIT)
MIT License
Copyright (c) 2021 Shu Ding
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
comma-separated-tokens@2.0.3 (MIT)
(The MIT License)
Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
date-fns@4.4.0 (MIT)
MIT License
Copyright (c) 2021 Sasha Koss and Lesha Koss https://kossnocorp.mit-license.org
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
dequal@2.0.3 (MIT)
The MIT License (MIT)
Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
========================================================================
emoji-regex-xs@1.0.0 (MIT)
MIT License
Copyright (c) 2024 Steven Levithan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
framer-motion@12.43.0 (MIT)
The MIT License (MIT)
Copyright (c) 2018 Framer B.V.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
hast-util-to-html@9.0.5 (MIT)
(The MIT License)
Copyright (c) Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
hast-util-whitespace@3.0.0 (MIT)
(The MIT License)
Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
html-void-elements@3.0.0 (MIT)
(The MIT License)
Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
lucide-react@0.544.0 (ISC)
ISC License
Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2023 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2025.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
---
The MIT License (MIT) (for portions derived from Feather)
Copyright (c) 2013-2023 Cole Bemis
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
motion@12.23.12 (MIT)
The MIT License (MIT)
Copyright (c) 2024 [Motion](https://motion.dev) B.V.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
motion-dom@12.43.0 (MIT)
The MIT License (MIT)
Copyright (c) 2024 [Motion](https://motion.dev) B.V.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
motion-utils@12.39.0 (MIT)
The MIT License (MIT)
Copyright (c) 2024 [Motion](https://motion.dev) B.V.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
oniguruma-to-es@3.1.1 (MIT)
MIT License
Copyright (c) 2025 Steven Levithan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
phenomenon@1.6.0 (MIT)
MIT License
Copyright (c) 2019 Colin van Eenige
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
property-information@7.2.0 (MIT)
(The MIT License)
Copyright (c) Titus Wormer <mailto:tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
react@19.1.1 (MIT)
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
react-day-picker@9.11.0 (MIT)
The MIT License (MIT)
Copyright (c) 2014-2025 Giampaolo Bellavite <io@gpbl.dev> and contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
react-dom@19.1.1 (MIT)
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
react-tweet@3.2.2 (MIT)
The MIT License (MIT)
Copyright (c) 2023 Luis Alvarez.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
regex@6.1.0 (MIT)
MIT License
Copyright (c) 2025 Steven Levithan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
regex-recursion@6.0.2 (MIT)
MIT License
Copyright (c) 2025 Steven Levithan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
regex-utilities@2.3.0 (MIT)
MIT License
Copyright (c) 2024 Steven Levithan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
rough-notation@0.5.1 (MIT)
MIT License
Copyright (c) 2020 Preet Shihn
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
scheduler@0.26.0 (MIT)
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
shiki@2.5.0 (MIT)
MIT License
Copyright (c) 2021 Pine Wu
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
space-separated-tokens@2.0.2 (MIT)
(The MIT License)
Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
stringify-entities@4.0.4 (MIT)
(The MIT License)
Copyright (c) 2015 Titus Wormer <mailto:tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
========================================================================
svg-dotted-map@2.0.1 (see package notice)
MIT License
Copyright (c) 2025 Jesse Winton
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
swr@2.5.1 (MIT)
MIT License
Copyright (c) 2023 Vercel, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
tailwind-merge@3.3.1 (MIT)
MIT License
Copyright (c) 2021 Dany Castillo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
use-sync-external-store@1.7.0 (MIT)
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
========================================================================
zwitch@2.0.4 (MIT)
(The MIT License)
Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
external-assets.json실행 안내·자료
{
"schema_version": "1.0",
"records": [
{
"id": "magic-ui-90c5564b9991",
"url": "https://avatars.githubusercontent.com/u/106103625",
"file": "external-assets/aeaaab9033f0efac9a1db6d28bb2ef0e19878d4dcf47282de4d3319b532beedb.png",
"sha256": "aeaaab9033f0efac9a1db6d28bb2ef0e19878d4dcf47282de4d3319b532beedb",
"bytes": 7901,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.843Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-90c5564b9991",
"url": "https://avatars.githubusercontent.com/u/20110627",
"file": "external-assets/bd554ca85e90920541180b2639be2f27f11d8bea30222de60e3e4d4d337ac0f7.jpg",
"sha256": "bd554ca85e90920541180b2639be2f27f11d8bea30222de60e3e4d4d337ac0f7",
"bytes": 37367,
"contentType": "image/jpeg",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.844Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-90c5564b9991",
"url": "https://avatars.githubusercontent.com/u/59228569",
"file": "external-assets/87599b022ed7ef51132783258902f337d6a031527270768aba52a7ecb1a1de3e.jpg",
"sha256": "87599b022ed7ef51132783258902f337d6a031527270768aba52a7ecb1a1de3e",
"bytes": 20834,
"contentType": "image/jpeg",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.846Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-90c5564b9991",
"url": "https://avatars.githubusercontent.com/u/16860528",
"file": "external-assets/5a264107cf93f397985960a11e0c28ff088436596d967e309ee8f4de8874d0fe.png",
"sha256": "5a264107cf93f397985960a11e0c28ff088436596d967e309ee8f4de8874d0fe",
"bytes": 174747,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.858Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-90c5564b9991",
"url": "https://avatars.githubusercontent.com/u/89768406",
"file": "external-assets/d0b3fbcafc7f57a6317eff694f0a2ccca5fdac891c76879de066a2faca09c43f.jpg",
"sha256": "d0b3fbcafc7f57a6317eff694f0a2ccca5fdac891c76879de066a2faca09c43f",
"bytes": 22080,
"contentType": "image/jpeg",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.868Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-90c5564b9991",
"url": "https://avatars.githubusercontent.com/u/59442788",
"file": "external-assets/68ca13237c7ec4b88a5d58d93ac9d3e556516feeb61e4f2a8eb889749f0e79ed.jpg",
"sha256": "68ca13237c7ec4b88a5d58d93ac9d3e556516feeb61e4f2a8eb889749f0e79ed",
"bytes": 29764,
"contentType": "image/jpeg",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.869Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-c4120585a89a",
"url": "https://images.unsplash.com/photo-1736606355698-5efdb410fe93?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"file": "external-assets/530ae11bad199d791441e23ab8a575b883674d491daea40e9d4c3ee773ba9bec.jpg",
"sha256": "530ae11bad199d791441e23ab8a575b883674d491daea40e9d4c3ee773ba9bec",
"bytes": 398835,
"contentType": "image/jpeg",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.928Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-762cd3682808",
"url": "https://avatar.vercel.sh/jack",
"file": "external-assets/1a470131d8a8681428d8ae556ca9d0856a607da0a298de094ca06fec0b0d8aea.png",
"sha256": "1a470131d8a8681428d8ae556ca9d0856a607da0a298de094ca06fec0b0d8aea",
"bytes": 4603,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:19.984Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-762cd3682808",
"url": "https://avatar.vercel.sh/jill",
"file": "external-assets/df122971d16ce7711212986e512204823caee3f8164735b9052872ace7ee6043.png",
"sha256": "df122971d16ce7711212986e512204823caee3f8164735b9052872ace7ee6043",
"bytes": 4930,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:20.033Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-762cd3682808",
"url": "https://avatar.vercel.sh/john",
"file": "external-assets/fe3bd146ffab3bc5195ab531bc8a654c1ead507f91248bf93c67f149cd0f55dc.png",
"sha256": "fe3bd146ffab3bc5195ab531bc8a654c1ead507f91248bf93c67f149cd0f55dc",
"bytes": 3032,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:20.040Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-762cd3682808",
"url": "https://avatar.vercel.sh/jane",
"file": "external-assets/27c92228eb3bd4294e9111263fcc332b380184810e50fe5446166419f2610c68.png",
"sha256": "27c92228eb3bd4294e9111263fcc332b380184810e50fe5446166419f2610c68",
"bytes": 5449,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:20.048Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-762cd3682808",
"url": "https://avatar.vercel.sh/jenny",
"file": "external-assets/1900cafc916eb59674c7690a72b9ea868611b20e4afcac06e8d6823ed4f43007.png",
"sha256": "1900cafc916eb59674c7690a72b9ea868611b20e4afcac06e8d6823ed4f43007",
"bytes": 2730,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:20.050Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-762cd3682808",
"url": "https://avatar.vercel.sh/james",
"file": "external-assets/6d6754ef3210a435f43e4b170e19acdb2bb0886575e9cb20f6a1e2d70775a42e.png",
"sha256": "6d6754ef3210a435f43e4b170e19acdb2bb0886575e9cb20f6a1e2d70775a42e",
"bytes": 2787,
"contentType": "image/png",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:20.096Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-89df10ad6b79",
"url": "https://cdn.magicui.design/ocean-small.webm",
"file": "external-assets/94b243dc90c04db913d0b3d79c62544564d54fc8e6fbb50559dc54bedbb99028.webm",
"sha256": "94b243dc90c04db913d0b3d79c62544564d54fc8e6fbb50559dc54bedbb99028",
"bytes": 722190,
"contentType": "video/webm",
"status": "acquired",
"acquiredAt": "2026-09-22T02:17:21.914Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-f441c45254fb",
"url": "https://startup-template-sage.vercel.app/hero-dark.png",
"file": "external-assets/b4fb85afae2672890bcb8d353724ed6d17d752ded4baf1552379451f0d352a01.png",
"sha256": "b4fb85afae2672890bcb8d353724ed6d17d752ded4baf1552379451f0d352a01",
"contentType": "image/png",
"bytes": 201027,
"status": "acquired",
"acquiredAt": "2026-09-22T02:18:50.688Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-f441c45254fb",
"url": "https://startup-template-sage.vercel.app/hero-light.png",
"file": "external-assets/fc3ccc2cd42f9a07d120f454efdd2c2ecf95bc252f30ee0abc007ae8c22665f9.png",
"sha256": "fc3ccc2cd42f9a07d120f454efdd2c2ecf95bc252f30ee0abc007ae8c22665f9",
"contentType": "image/png",
"bytes": 199924,
"status": "acquired",
"acquiredAt": "2026-09-22T02:18:51.064Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-e2416c651aba",
"url": "https://pbs.twimg.com/profile_images/1902402394475880448/w8lUXnEe_normal.jpg",
"file": "external-assets/c6f3182ec81b91d8a4cbe58926d529972eed82592236b17ac87ed97225bd38c4.jpg",
"sha256": "c6f3182ec81b91d8a4cbe58926d529972eed82592236b17ac87ed97225bd38c4",
"contentType": "image/jpeg",
"bytes": 1959,
"status": "acquired",
"acquiredAt": "2026-09-22T02:18:51.207Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-e2416c651aba",
"url": "https://pbs.twimg.com/ext_tw_video_thumb/1668388166598787079/pu/img/mA7mfmJyXKLcGmo_.jpg",
"file": "external-assets/f11bdc73f96dc137d0d6c85eb15a9e505dafa6643e377b51a634e121d62d8f65.jpg",
"sha256": "f11bdc73f96dc137d0d6c85eb15a9e505dafa6643e377b51a634e121d62d8f65",
"contentType": "image/jpeg",
"bytes": 61151,
"status": "acquired",
"acquiredAt": "2026-09-22T02:18:51.405Z",
"license": "Original demo referenced asset; separate from upstream code license."
},
{
"id": "magic-ui-e2416c651aba",
"url": "https://video.twimg.com/ext_tw_video/1668388166598787079/pu/vid/480x270/rWVkbpQFowBCt-vE.mp4?tag=12",
"file": "external-assets/464ba31975edd8b0235532250b3981a4e7ab801f47d161f1c50cc703e0c4b3e6.mp4",
"sha256": "464ba31975edd8b0235532250b3981a4e7ab801f47d161f1c50cc703e0c4b3e6",
"contentType": "video/mp4",
"bytes": 115571,
"status": "acquired",
"acquiredAt": "2026-09-22T02:18:51.574Z",
"license": "Original demo referenced asset; separate from upstream code license."
}
]
}
runtime/host.tsx실행 안내·자료
/** StyleGallery consumer host adapters. Upstream component modules stay unchanged. */
import React, { createContext, useContext, useEffect, useState } from 'react';
const ThemeContext = createContext({ theme: 'light', resolvedTheme: 'light', systemTheme: 'light', setTheme: (_: string) => {} });
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState(() => new URLSearchParams(location.search).get('theme') === 'dark' ? 'dark' : 'light');
useEffect(() => {
document.documentElement.classList.toggle('dark', theme === 'dark');
}, [theme]);
return <ThemeContext.Provider value={{ theme, resolvedTheme: theme, systemTheme: 'light', setTheme }}>{children}</ThemeContext.Provider>;
}
export const useTheme = () => useContext(ThemeContext);
export const Link = React.forwardRef<HTMLAnchorElement, any>(function Link({ children, href, prefetch, replace, scroll, shallow, locale, legacyBehavior, ...props }, ref) {
return <a {...props} ref={ref}>{children}</a>;
});
export const Image = React.forwardRef<HTMLImageElement, any>(function Image({ src, fill, priority, quality, loader, unoptimized, placeholder, blurDataURL, ...props }, ref) {
return <img {...props} ref={ref} src={typeof src === 'string' ? src : src?.src} style={{ ...(fill ? { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } : {}), ...props.style }} />;
});
runtime/mount.tsx실행 안내·자료
/** Local mounting and diagnostics only. No telemetry, cookies, storage, or navigation. */
import React, { Component, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider } from './host';
declare global {
interface Window {
__STYLEGALLERY_PREVIEW__: { id: string; status: string; errors: string[] };
}
}
export function mount(Demo: React.ComponentType<any>, id: string, props: object = {}) {
const state = window.__STYLEGALLERY_PREVIEW__ = { id, status: 'loading', errors: [] as string[] };
const report = (error: unknown) => {
const message = error instanceof Error ? error.message : String(error);
if (!state.errors.includes(message)) state.errors.push(message);
state.status = 'error';
document.body.dataset.previewStatus = 'error';
parent.postMessage({ type: 'sg-preview-error', id, message }, '*');
};
window.addEventListener('error', (event) => report(event.error ?? event.message));
window.addEventListener('unhandledrejection', (event) => report(event.reason));
document.addEventListener('error', (event) => {
const node = event.target;
if (node instanceof HTMLImageElement || node instanceof HTMLVideoElement || node instanceof HTMLSourceElement) {
parent.postMessage({ type: 'sg-preview-asset-error', id, tag: node.tagName.toLowerCase(), message: 'A preview media asset did not load.' }, '*');
}
}, true);
const observe = () => {
const root = document.getElementById('root')!;
const elements = Array.from(root.querySelectorAll('*'));
const rect = root.getBoundingClientRect();
const diagnostics = {
textLength: (root.textContent ?? '').trim().length,
elementCount: elements.length,
visibleElementCount: elements.filter((element) => {
const bounds = element.getBoundingClientRect();
const style = getComputedStyle(element);
return bounds.width > 0 && bounds.height > 0 && style.display !== 'none' && style.visibility !== 'hidden' && Number(style.opacity) !== 0;
}).length,
images: Array.from(root.querySelectorAll('img')).map((image) => ({ complete: image.complete, naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight })),
canvases: Array.from(root.querySelectorAll('canvas')).map((canvas) => {
const bounds = canvas.getBoundingClientRect();
return { width: canvas.width, height: canvas.height, rectWidth: bounds.width, rectHeight: bounds.height };
}),
rootRect: { width: rect.width, height: rect.height },
documentWidth: document.documentElement.scrollWidth,
viewportWidth: innerWidth,
};
parent.postMessage({ type: 'sg-preview-observation', id, diagnostics }, '*');
};
class Boundary extends Component<{ children: React.ReactNode }, { error: string | null }> {
state = { error: null as string | null };
static getDerivedStateFromError(error: Error) { return { error: error.message }; }
componentDidCatch(error: Error) { report(error); }
render() { return this.state.error ? <p role="alert">This preview could not render: {this.state.error}</p> : this.props.children; }
}
function Ready() {
useEffect(() => {
let second = 0;
let delayed = 0;
const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => {
if (state.status !== 'error') {
state.status = 'mounted';
document.body.dataset.previewStatus = 'mounted';
parent.postMessage({ type: 'sg-preview-ready', id }, '*');
observe();
delayed = window.setTimeout(observe, 700);
}
}); });
return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); clearTimeout(delayed); };
}, []);
return <Demo {...props} />;
}
// Preserve demonstration appearance while keeping preview navigation local.
document.addEventListener('click', (event) => {
if ((event.target as Element)?.closest?.('a')) event.preventDefault();
}, true);
document.addEventListener('submit', (event) => event.preventDefault());
const removeDestinations = () => document.querySelectorAll('a[href]').forEach((node) => {
node.removeAttribute('href');
node.removeAttribute('target');
});
new MutationObserver(removeDestinations).observe(document.getElementById('root')!, { childList: true, subtree: true });
createRoot(document.getElementById('root')!).render(<Boundary><ThemeProvider><Ready /></ThemeProvider></Boundary>);
}
runtime/storage.ts실행 안내·자료
/** Ephemeral demo state. Opaque sandbox previews never touch origin storage. */
const values = new Map<string, string>();
export const localStorage = {
getItem: (key: string) => values.get(key) ?? null,
setItem: (key: string, value: string) => values.set(key, String(value)),
removeItem: (key: string) => values.delete(key),
clear: () => values.clear(),
};
export const sessionStorage = localStorage;
BEHIND THE EXAMPLE
이 장면을 만드는 원리
색 분산과 렌즈 모양의 왜곡을 분리하기
불확실한 시각 관계를 확인할 수 있는 작은 예제를 만들고, 그 결과의 적용 범위를 함께 기록합니다.
- 이 예제에서는
- spread는 색 레이어가 벌어지는 정도, dispersion은 각 레이어에 스펙트럼 색을 입히는 정도입니다. lensBulge는 이미지 기하를 볼록하거나 오목하게 변형합니다. focusCenter·focusEdges는 색 분산을 줄일 영역이며 imageX·imageY는 효과 뒤의 원본 이미지를 이동합니다.
코드와 함께 확인하기
코드에서 찾기
LensDistortionExamplelens-distortion-example.tsx원본 사용 예제는 전달받은 props를 셰이더에 적용합니다. 매개변수 비교의 출발점입니다.
LensDistortionImpllens-distortion.tsx공개 매개변수를 해당 uniform으로 옮깁니다. 화면의 입력값과 셰이더 입력을 대조할 지점입니다.
lensWarplens-distortion.ts기하 왜곡으로 baseUV를 만든 뒤 getSpread가 정하는 방향으로 여러 색 샘플을 누적합니다.
직접 해보기
실행 예제의 코드를 복사한 뒤 확인합니다. 같은 이미지에서 spread=0으로 두고 lensBulge를 바꿉니다. lensBulge를 되돌린 뒤 spread와 dispersion을 각각 바꿉니다.
살펴볼 변화이미지의 기하 변형과 색 레이어 분리를 서로 다른 변화로 확인할 수 있어야 합니다. 분산을 끄는 값이 모든 왜곡을 끄는 값은 아닙니다.
색 레이어 수를 늘릴 때의 비용과 경계
같은 정보를 유지한 비교에서 작업량의 변화와 최종 화질을 함께 기록합니다.
- 이 예제에서는
- count는 spread 방향으로 샘플링하는 색 레이어 수입니다. 많은 레이어는 더 촘촘한 합성을 만들지만 원본 소스만으로 특정 기기에서의 프레임 비용을 알 수는 없습니다. 정적 이미지 필터여도 조절과 크기 변경 시 다시 그리는 비용이 있습니다.
코드와 함께 확인하기
코드에서 찾기
u_countlens-distortion.ts색 레이어 샘플 반복에 사용됩니다. spread가 없는 경우와 있는 경우를 같은 작업으로 비교하지 않아야 합니다.
setUniformsshader-mount.ts매개변수 갱신 뒤 렌더를 요청하므로 정적 필터도 조절 중에 작업이 발생합니다.
직접 해보기
실행 예제의 코드를 복사한 뒤 확인합니다. spread를 같은 양수로 고정하고 count를 2와 30으로 번갈아 설정합니다. 같은 창 크기에서 컨트롤 응답과 가장자리 색 분리를 비교합니다.
살펴볼 변화샘플 수와 결과 차이를 설명할 수 있어야 합니다. 성능 개선이나 저하의 수치는 환경과 추적 기록이 있을 때만 보고합니다.