Devjar
Live React Component Previews in Browser
Devjar empowers you create interactive, real-time React code preview easier. Builtin Tailwind and CSS imports for styling, creating demos that are stylish and eye-catching.
Examples
1precision mediump float;23uniform vec2 u_resolution;4uniform float u_time;5uniform vec2 u_mouse;67void main() {8 vec2 st = gl_FragCoord.xy / u_resolution.xy;9 10 // Create a pulsing circle11 vec2 center = vec2(0.5, 0.5);12 float dist = distance(st, center);13 float radius = 0.3 + 0.1 * sin(u_time * 2.0);14 15 // Create color based on distance and time16 vec3 color = vec3(0.0);17 if (dist < radius) {18 float intensity = 1.0 - (dist / radius);19 color = vec3(20 0.5 + 0.5 * sin(u_time + st.x * 10.0),21 0.5 + 0.5 * sin(u_time + st.y * 10.0 + 2.0),22 0.5 + 0.5 * sin(u_time + (st.x + st.y) * 10.0 + 4.0)23 ) * intensity;24 }25 26 // Add mouse interaction27 vec2 mouseDist = st - u_mouse;28 float mouseRadius = 0.1;29 if (length(mouseDist) < mouseRadius) {30 color += vec3(1.0, 1.0, 0.5) * (1.0 - length(mouseDist) / mouseRadius) * 0.5;31 }32 33 gl_FragColor = vec4(color, 1.0);34}35Usage
GL Runtime
Import useGL from devjar and call it with your fragment shader code, a canvas ref, and an optional error callback. The hook handles WebGL setup, shader compilation, and provides automatic uniforms for time, resolution, and mouse position.
import { useGL } from 'devjar'import { useRef } from 'react'function Shader() { const canvasRef = useRef(null) useGL({ fragment: ` precision mediump float; uniform vec2 u_resolution; uniform float u_time; void main() { vec2 st = gl_FragCoord.xy / u_resolution.xy; gl_FragColor = vec4(st.x, st.y, abs(sin(u_time)), 1.0); } `, canvasRef, onError: (err) => console.error(err) }) return <canvas ref={canvasRef} />}