5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 61:T1a34,import { BARREL_REACH } from "../crt/warp-filter" import type { ShaderMotionParams, ShaderPreset } from "./types" export const crtFragmentShader = `#version 300 es precision highp float; uniform float u_time; uniform vec2 u_resolution; uniform float u_pxSize; uniform float u_pixelRatio; uniform float u_fps; uniform float u_scanlines; uniform float u_scanlineDensity; uniform float u_noise; uniform float u_vignette; uniform float u_mask; uniform float u_flicker; uniform float u_curvature; uniform float u_roll; out vec4 fragColor; const float TAU = 6.2831853; const float BARREL_REACH = ${BARREL_REACH.toFixed(3)}; float readHash(vec3 point) { vec3 scaled = fract(point * vec3(0.1031, 0.103, 0.0973)); scaled += dot(scaled, scaled.yxz + 33.33); return fract((scaled.x + scaled.y) * scaled.z); } vec2 readBarrelShift(vec2 unit) { float reach = u_curvature * BARREL_REACH; float radiusSquared = dot(unit, unit) * 0.5; return unit * reach * (radiusSquared - 1.0) / (1.0 + reach); } float readBoxDistance(vec2 point, vec2 halfSize, float radius) { vec2 inner = abs(point) - halfSize + radius; return length(max(inner, 0.0)) + min(max(inner.x, inner.y), 0.0) - radius; } vec4 readLayer(vec3 color, float alpha) { return vec4(color * alpha, alpha); } vec4 stack(vec4 top, vec4 bottom) { return top + bottom * (1.0 - top.a); } vec4 readMask(vec2 fragment) { float stripe = mod(floor(fragment.x / max(u_pixelRatio, 1.0)), 3.0); vec3 phosphor = stripe < 0.5 ? vec3(1.0, 0.0, 0.0) : stripe < 1.5 ? vec3(0.0, 1.0, 0.0) : vec3(0.0, 0.0, 1.0); return readLayer(phosphor, u_mask * 0.2); } vec4 readScanlines(vec2 sourcePx) { float period = max(u_scanlineDensity * u_pixelRatio, 2.0); float gap = 0.5 - 0.5 * cos(sourcePx.y / period * TAU); return readLayer(vec3(0.0), u_scanlines * gap * gap); } vec4 readNoise(vec2 fragment, float frame) { float grain = readHash(vec3(fragment, frame)) - 0.5; return readLayer(vec3(step(0.0, grain)), abs(grain) * 2.0 * u_noise * 0.4); } vec4 readRoll(float height) { float head = mod(u_time * 0.18, 1.35) - 0.2; float along = (height - head) / 0.16; float glow = exp(-along * along); float trail = exp(-(along + 1.8) * (along + 1.8) * 0.4); return stack(readLayer(vec3(1.0), glow * 0.08), readLayer(vec3(0.0), trail * 0.2)); } vec4 readVignette(vec2 unit) { float reach = smoothstep(0.3, 1.45, length(unit)); return readLayer(vec3(0.0), u_vignette * reach * reach); } vec4 readBezel(vec2 fragment) { vec2 center = u_resolution * 0.5; float shortSide = min(u_resolution.x, u_resolution.y); float lip = (1.0 + 6.0 * u_curvature) * u_pxSize; float bow = u_curvature * 0.05 * shortSide; float radius = max(min(u_curvature * 0.3 * shortSide, shortSide * 0.5 - lip - bow), 0.0); vec2 cell = (floor(fragment / u_pxSize) + 0.5) * u_pxSize; vec2 cellUnit = (cell - center) / center; vec2 pointUnit = (fragment - center) / center; vec2 cellBox = center - lip - bow * cellUnit.yx * cellUnit.yx; vec2 pointBox = center - lip - bow * pointUnit.yx * pointUnit.yx; float outside = step(0.0, readBoxDistance(cell - center, cellBox, radius)); float depth = shortSide * (0.03 + 0.1 * u_curvature); float inside = clamp(-readBoxDistance(fragment - center, pointBox, radius) / depth, 0.0, 1.0); float shadow = (1.0 - inside) * (1.0 - inside) * 0.6; return readLayer(vec3(0.0), max(outside, shadow)); } void main() { vec2 fragment = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y); vec2 unit = fragment / u_resolution * 2.0 - 1.0; vec2 sourcePx = (unit + readBarrelShift(unit)) * 0.5 * u_resolution + u_resolution * 0.5; float frame = floor(u_time * u_fps + 0.001); vec4 color = vec4(0.0); if (u_mask > 0.0) { color = stack(readMask(fragment), color); } if (u_scanlines > 0.0) { color = stack(readScanlines(sourcePx), color); } if (u_noise > 0.0) { color = stack(readNoise(fragment, frame), color); } if (u_roll > 0.5) { color = stack(readRoll(fragment.y / u_resolution.y), color); } if (u_flicker > 0.0) { color = stack(readLayer(vec3(0.0), u_flicker * 0.14 * readHash(vec3(frame, 7.0, 3.0))), color); } if (u_vignette > 0.0) { color = stack(readVignette(unit), color); } if (u_curvature > 0.0) { color = stack(readBezel(fragment), color); } fragColor = color; } ` export type CrtUniforms = { u_fps: number u_scanlines: number u_scanlineDensity: number u_noise: number u_vignette: number u_mask: number u_flicker: number u_curvature: number u_roll: number } export type CrtParams = Required & { scanlines: number scanlineDensity: number noise: number vignette: number mask: number flicker: number bloom: number curvature: number aberration: number roll: boolean } export type CrtPresetName = "subtle" | "arcade" | "broken" export const crtPresets: Record> = { subtle: { name: "Subtle", params: { speed: 1, frame: 0, fps: 30, scanlines: 0.18, scanlineDensity: 3, noise: 0.08, vignette: 0.25, mask: 0.1, flicker: 0, bloom: 0.15, curvature: 0.15, aberration: 0, roll: false, }, }, arcade: { name: "Arcade", params: { speed: 1, frame: 0, fps: 30, scanlines: 0.4, scanlineDensity: 3, noise: 0.12, vignette: 0.45, mask: 0.25, flicker: 0, bloom: 0.5, curvature: 0.22, aberration: 1.2, roll: false, }, }, broken: { name: "Broken", params: { speed: 1, frame: 0, fps: 30, scanlines: 0.35, scanlineDensity: 3, noise: 0.35, vignette: 0.6, mask: 0.15, flicker: 0.6, bloom: 0.4, curvature: 0.32, aberration: 3, roll: true, }, }, } export const defaultCrtPreset: CrtPresetName = "subtle" export function resolveCrtParams( preset: CrtPresetName, overrides: Partial, isReducedMotion: boolean ): CrtParams { const base = crtPresets[preset].params const defined = Object.fromEntries(Object.entries(overrides).filter(([, value]) => value !== undefined)) const resolved = { ...base, ...defined } return isReducedMotion ? { ...resolved, speed: 0, flicker: 0 } : resolved } export function toCrtUniforms(params: CrtParams): CrtUniforms { return { u_fps: params.fps, u_scanlines: params.scanlines, u_scanlineDensity: params.scanlineDensity, u_noise: params.noise, u_vignette: params.vignette, u_mask: params.mask, u_flicker: params.flicker, u_curvature: params.curvature, u_roll: params.roll ? 1 : 0, } } 62:T7c9,const MAP_MAX_SIZE = 256 const MAP_DIVISOR = 4 export const BARREL_REACH = 0.4 export type BarrelMap = { href: string; scale: number } function readDisplacement(unit: number, radiusSquared: number, reach: number): number { return (unit * reach * (radiusSquared - 1)) / (1 + reach) } export function createBarrelMap(width: number, height: number, curvature: number): BarrelMap | null { const mapWidth = Math.max(2, Math.min(MAP_MAX_SIZE, Math.ceil(width / MAP_DIVISOR))) const mapHeight = Math.max(2, Math.min(MAP_MAX_SIZE, Math.ceil(height / MAP_DIVISOR))) const canvas = document.createElement("canvas") canvas.width = mapWidth canvas.height = mapHeight const context = canvas.getContext("2d") if (!context) { return null } const reach = curvature * BARREL_REACH const shifts = new Float32Array(mapWidth * mapHeight * 2) let peak = 0 for (let row = 0; row < mapHeight; row++) { for (let column = 0; column < mapWidth; column++) { const unitX = ((column + 0.5) / mapWidth) * 2 - 1 const unitY = ((row + 0.5) / mapHeight) * 2 - 1 const radiusSquared = (unitX * unitX + unitY * unitY) / 2 const shiftX = readDisplacement(unitX, radiusSquared, reach) * (width / 2) const shiftY = readDisplacement(unitY, radiusSquared, reach) * (height / 2) const index = (row * mapWidth + column) * 2 shifts[index] = shiftX shifts[index + 1] = shiftY peak = Math.max(peak, Math.abs(shiftX), Math.abs(shiftY)) } } const scale = Math.max(peak * 2, 1) const image = context.createImageData(mapWidth, mapHeight) for (let index = 0; index < mapWidth * mapHeight; index++) { image.data[index * 4] = Math.round((0.5 + shifts[index * 2] / scale) * 255) image.data[index * 4 + 1] = Math.round((0.5 + shifts[index * 2 + 1] / scale) * 255) image.data[index * 4 + 2] = 128 image.data[index * 4 + 3] = 255 } context.putImageData(image, 0, 0) return { href: canvas.toDataURL("image/png"), scale } } 63:T21cd,"use client" import { cn } from "cn" import * as React from "react" import { ShaderMount } from "@/components/ui/shader-mount" import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion" import { type BarrelMap, createBarrelMap } from "@/lib/crt/warp-filter" import { crtFragmentShader, type CrtParams, type CrtPresetName, defaultCrtPreset, resolveCrtParams, toCrtUniforms, } from "@/lib/shaders/crt" const NO_COLORS = {} const BLOOM_BLUR = 6 const BLOOM_GAIN = 1.2 const FULLSCREEN_OVERLAY_CLASS = "fixed inset-0 z-[2147483647]" const VIEWPORT_PROBE_CLASS = "pointer-events-none invisible fixed inset-x-0 top-0 h-lvh" const CHANNELS = [ { name: "red", matrix: "1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0", direction: -1 }, { name: "green", matrix: "0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0", direction: 0 }, { name: "blue", matrix: "0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0", direction: 1 }, ] as const type CrtScreenProps = React.ComponentProps<"div"> & Partial & { preset?: CrtPresetName fullscreen?: boolean } type Size = { width: number; height: number } type Warp = { id: string; defs: React.ReactNode } function subscribeNothing(): () => void { return () => {} } function readRootElement(): HTMLElement { return document.documentElement } function readServerElement(): null { return null } function readIsWebKit(): boolean { return navigator.vendor.startsWith("Apple") } function readServerIsWebKit(): boolean { return false } function useElementSize(element: HTMLElement | null): Size | null { const [size, setSize] = React.useState(null) React.useEffect(() => { if (!element) { return } const observer = new ResizeObserver(([entry]) => { if (entry) { const { offsetWidth, offsetHeight } = element setSize((previous) => previous?.width === offsetWidth && previous.height === offsetHeight ? previous : { width: offsetWidth, height: offsetHeight } ) } }) observer.observe(element) return () => observer.disconnect() }, [element]) return size } function useCrtWarp( target: HTMLElement | null, size: Size | null, curvature: number, aberration: number, bloom: number ): Warp | null { const id = `crt-warp-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}` const isWarped = curvature > 0 || aberration > 0 || bloom > 0 const width = size?.width ?? 0 const height = size?.height ?? 0 const map = React.useMemo( () => (curvature > 0 && width > 0 && height > 0 ? createBarrelMap(width, height, curvature) : null), [curvature, width, height] ) const isReady = isWarped && target !== null && width > 0 && height > 0 && (curvature <= 0 || map !== null) React.useEffect(() => { if (!target || !isReady) { return } const previous = target.style.getPropertyValue("filter") target.style.setProperty("filter", `url(#${id})`) return () => { target.style.setProperty("filter", previous) } }, [target, isReady, id]) if (!isReady) { return null } const warped = map ? "warped" : "SourceGraphic" const split = aberration > 0 ? "split" : warped const gain = bloom * BLOOM_GAIN return { id, defs: ( {map && ( <> )} {aberration > 0 && CHANNELS.map(({ name, matrix, direction }) => ( ))} {aberration > 0 && ( <> )} {bloom > 0 && ( <> )} ), } } function WarpDefs({ warp }: { warp: Warp | null }) { if (!warp) { return null } return ( ) } function CrtOverlay({ params, className, ...props }: { params: CrtParams } & React.ComponentProps<"div">) { const uniforms = React.useMemo(() => toCrtUniforms(params), [params]) return ( ) } function useCrtParams(props: Partial, preset: CrtPresetName): CrtParams { const isReducedMotion = usePrefersReducedMotion() const { speed, frame, fps, scanlines, scanlineDensity, noise, vignette, mask, flicker, bloom, curvature, aberration, roll } = props return React.useMemo( () => resolveCrtParams( preset, { speed, frame, fps, scanlines, scanlineDensity, noise, vignette, mask, flicker, bloom, curvature, aberration, roll }, isReducedMotion ), [preset, isReducedMotion, speed, frame, fps, scanlines, scanlineDensity, noise, vignette, mask, flicker, bloom, curvature, aberration, roll] ) } function FullscreenCrt({ params, children, ...props }: { params: CrtParams } & React.ComponentProps<"div">) { const root = React.useSyncExternalStore(subscribeNothing, readRootElement, readServerElement) const [probe, setProbe] = React.useState(null) const viewport = useElementSize(probe) const isWebKit = React.useSyncExternalStore(subscribeNothing, readIsWebKit, readServerIsWebKit) const warpTarget = isWebKit ? null : root const warp = useCrtWarp(warpTarget, viewport, params.curvature, params.aberration, params.bloom) return ( <>

{children} ) } function ScopedCrt({ params, className, children, ...props }: { params: CrtParams } & React.ComponentProps<"div">) { const [content, setContent] = React.useState(null) const size = useElementSize(content) const warp = useCrtWarp(content, size, params.curvature, params.aberration, params.bloom) return (

{children}

) } function CrtScreen({ preset = defaultCrtPreset, fullscreen = false, speed, frame, fps, scanlines, scanlineDensity, noise, vignette, mask, flicker, bloom, curvature, aberration, roll, ...props }: CrtScreenProps) { const params = useCrtParams( { speed, frame, fps, scanlines, scanlineDensity, noise, vignette, mask, flicker, bloom, curvature, aberration, roll }, preset ) return fullscreen ? : } export { CrtScreen } export type { CrtScreenProps } 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L5f",null,{"namespace":"@ui95","registryDependencies":["@ui95/theme","@ui95/shader-mount","@ui95/use-prefers-reduced-motion"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"lib/shaders/crt.ts","content":"$61","type":"registry:lib","target":"@lib/shaders/crt.ts"},{"path":"lib/crt/warp-filter.ts","content":"$62","type":"registry:lib","target":"@lib/crt/warp-filter.ts"},{"path":"components/retro/crt-screen.tsx","content":"$63","type":"registry:component","target":"@components/retro/crt-screen.tsx"}],"className":"h-[70svh] min-h-80"}]]}]