123
124// --- Slider Component ---
125function Slider({ label, value, onChange, min, max, step }) {
126 return (
127 <div className="slider-container">
140
141// --- React Component ---
142function App() {
143 const canvasRef = useRef<HTMLCanvasElement>(null);
144 const [cloudscale, setCloudscale] = useState(1.1);
234 console.log("Position buffer created.");
235
236 // --- Resize Function ---
237 const resizeCanvasToDisplaySize = () => {
238 if (!canvas) return false;
305
306// --- Client Entry ---
307function client() {
308 const rootElement = document.getElementById("root");
309 if (!rootElement) {
399`;
400
401export default async function server(request: Request): Promise<Response> {
402 const valUrl = import.meta.url;
403 return new Response(
140
141// --- React Component ---
142function App() {
143 const canvasRef = useRef<HTMLCanvasElement>(null);
144
225 console.log("Position buffer created.");
226
227 // --- Resize Function ---
228 const resizeCanvasToDisplaySize = () => {
229 if (!canvas) return false;
284
285// --- Client Entry ---
286function client() {
287 const rootElement = document.getElementById("root");
288 if (!rootElement) {
318 }
319`;
320export default async function server(request: Request): Promise<Response> {
321 const valUrl = import.meta.url;
322 return new Response(
141
142// --- React Component ---
143function App() {
144 const canvasRef = useRef<HTMLCanvasElement>(null);
145
226 console.log("Position buffer created.");
227
228 // --- Resize Function ---
229 const resizeCanvasToDisplaySize = () => {
230 if (!canvas) return false;
285
286// --- Client Entry ---
287function client() {
288 const rootElement = document.getElementById("root");
289 if (!rootElement) {
319 }
320`;
321export default async function server(request: Request): Promise<Response> {
322 const valUrl = import.meta.url;
323 return new Response(
196}
197
198export default async function(req: Request): Promise<Response> {
199 if (req.method !== "POST") {
200 return Response.json({ message: "This val responds to POST requests." }, {
222}
223
224function mapInstagramResToOutput(data: DataDto): InstagramMediaResponse {
225 const imageUrl = data.xdt_shortcode_media.display_url;
226 const description = data.xdt_shortcode_media.edge_media_to_caption.edges[0].node.text;
239}
240
241async function getInstagramMedia(shortcode: string): Promise<InstagramMediaResponse> {
242 try {
243 // This is literally some guy's backend api (https://gram-grabberz.vercel.app/)
284}
285
286async function getImageDimensions(blob: Blob): Promise<{ width: number; height: number }> {
287 try {
288 // Use sharp for server-side image processing
24const float EPS = 1e-5;
25
26// Helper function MUST be defined before main() calls it
27vec3 calculateRadialBloom(vec2 uv, float time, float amp) {
28 vec3 c = vec3(0.0);
61}
62
63// Main shader function
64void main() {
65 // Calculate centered, aspect-corrected UVs
66 vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
67 // Call the helper function to get the color
68 vec3 col = calculateRadialBloom(uv, iTime, uAmp); // Pass uAmp here
69 // Output final color with full alpha
73
74// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
75// React component (Corrected render function scope)
76// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
77
78function App() {
79 const canvasRef = useRef<HTMLCanvasElement>(null);
80 // Refs for audio objects and animation ID
319
320// --- Client Entry ---
321function client() {
322 const root = document.getElementById("root");
323 if (root) createRoot(root).render(<App />);
331 canvas { display: block; width: 100%; height: 100%; }
332`;
333export default async function server(request: Request): Promise<Response> { // Added Request type
334 const valUrl = import.meta.url;
335 return new Response(
27const float EPS = 1e-5;
28
29// Starfield Tunnel calculation function (adapted from Danilo Guanabara / Gemini)
30vec3 calculateStarfield(vec2 p_aspect_corrected, float time, float amplitude) {
31 vec3 c = vec3(0.0); // Initialize color vector
98// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
99
100function App() {
101 const canvasRef = useRef<HTMLCanvasElement>(null);
102 const audioVolumeRef = useRef<number>(0); // Smoothed volume for shader with inertia
303
304// --- Client Entry ---
305function client() {
306 const root = document.getElementById("root");
307 if (root) createRoot(root).render(<App />);
315 canvas { display: block; width: 100%; height: 100%; }
316`;
317export default async function server(request: Request): Promise<Response> {
318 const valUrl = import.meta.url;
319 return new Response(
27const float EPS = 1e-5;
28
29// Hash function (if needed by noise - using simpler starfield logic now)
30// float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453); }
31
32// Starfield Tunnel calculation function (adapted from Danilo Guanabara / Gemini)
33vec3 calculateStarfield(vec2 p_aspect_corrected, float time, float amplitude) {
34 vec3 c = vec3(0.0); // Initialize color vector
79 vec2 uv_centered_aspect = (gl_FragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
80
81 // Calculate final color using the starfield function
82 vec3 col = calculateStarfield(uv_centered_aspect, iTime, uAmp);
83
93// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
94
95function App() {
96 const canvasRef = useRef<HTMLCanvasElement>(null);
97 // State for debug UI if needed, remove if not displaying amp
317
318// --- Client Entry ---
319function client() {
320 const root = document.getElementById("root");
321 if (root) createRoot(root).render(<App />);
329 canvas { display: block; width: 100%; height: 100%; }
330`;
331export default async function server(request: Request): Promise<Response> {
332 const valUrl = import.meta.url;
333 return new Response(
63// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
64
65function App() {
66 const canvasRef = useRef<HTMLCanvasElement>(null);
67
145}
146
147function client() {
148 const root = document.getElementById("root");
149 if (root) createRoot(root).render(<App />);
156
157const css = `html,body{margin:0;height:100%}#root{width:100%;height:100%}`;
158export default async function server(_: Request) {
159 const url = import.meta.url;
160 return new Response(
21const mat2 m = mat2( 1.6, 1.2, -1.2, 1.6 );
22
23// Hash function generates pseudo-random 2D vector
24vec2 hash( vec2 p ) {
25 p = vec2(dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)));
27}
28
29// Simplex noise function
30float noise( vec2 p ) { // Removed 'in' qualifier for GLSL 1.0
31 const float K1 = 0.366025404; // (sqrt(3)-1)/2;
54}
55
56// Base pattern function (e.g., animated stripes)
57vec3 pattern(vec2 uv, float time) {
58 // Frequency of stripes - modulate slightly with noise over time
127
128// --- React Component ---
129function App() {
130 const canvasRef = useRef<HTMLCanvasElement>(null);
131
212 console.log("Position buffer created.");
213
214 // --- Resize Function ---
215 const resizeCanvasToDisplaySize = () => {
216 if (!canvas) return false;
296
297// --- Client Entry ---
298function client() {
299 const rootElement = document.getElementById("root");
300 if (!rootElement) {
315 canvas { display: block; width: 100%; height: 100%; }
316`;
317export default async function server(request: Request): Promise<Response> {
318 const valUrl = import.meta.url;
319 return new Response(
63`;
64
65function App() {
66 const canvasRef = useRef(null);
67 useEffect(() => {
169}
170
171function client() {
172 const root = document.getElementById("root");
173 if (!root) return;
178const css =
179 `body, html { margin:0; padding:0; overflow:hidden; width:100%; height:100%; background:#000;} #root {width:100%; height:100%;} canvas {display:block; width:100%; height:100%;}`;
180export default async function server(request) {
181 return new Response(
182 `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Prismatic Rain Shader</title><style>${css}</style></head><body><div id="root"></div><script type="module" src="${import.meta.url}"></script></body></html>`,
