Throw an error if unable to get context and fix some examples

example/app/03-props.js

@@ -26,7 +26,7 @@ export function Props() {
   return (
     <div>
       <div>
-        <label htmlFor="ex03pause">Is paused:</label>
+        <label htmlFor="ex03pause">Is paused: </label>
         <input
           id="ex03pause"
           type="checkbox"

example/app/04-webgl.js

@@ -10,48 +10,72 @@ void main() {
 }
 `;
 
-// Made by kishimisu
-// https://www.shadertoy.com/view/mtyGWy
 const fs = `#version 300 es
 precision highp float;
 
-uniform vec2 u_resolution;
+out vec4 outColor;
+
 uniform float u_time;
+uniform vec2 u_resolution;
 
-out vec4 outColor;
+#define PI 3.141592653589793;
 
-vec3 palette( float t ) {
-  vec3 a = vec3(0.5, 0.5, 0.5);
-  vec3 b = vec3(0.5, 0.5, 0.5);
-  vec3 c = vec3(1.0, 1.0, 1.0);
-  vec3 d = vec3(0.263,0.416,0.557);
+float box2(vec2 p,vec2 b) {
+    p = abs(p)-b;
+    return length(max(vec2(0.),p))+min(0.,max(p.x,p.y));
+}
 
-  return a + b * cos(6.28318 * (c * t + d));
+vec3 erot(vec3 p, vec3 ax, float t) {
+  return mix(dot(ax,p)*ax,p,cos(t))+cross(ax,p)*sin(t);
 }
 
 void main() {
-  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
-
-  vec2 uv0 = uv;
-
-  vec3 finalColor = vec3(0.0);
-
-  for (float i = 0.0; i < 4.0; i++) {
-    uv = fract(uv * 1.5) - 0.5;
-
-    float d = length(uv) * exp(-length(uv0));
-
-    vec3 col = palette(length(uv0) + i * .4 + (u_time / 100.0) * .4);
-
-    d = sin(d * 8. + u_time / 100.0) / 8.;
-    d = abs(d);
-
-    d = pow(0.01 / d, 1.2);
-
-    finalColor += col * d;
-  }
-
-  outColor = vec4(finalColor, 1.0);
+    vec2 uv = (gl_FragCoord.xy - .5 * u_resolution.xy) / u_resolution.y;
+
+    vec3 col = vec3(0);
+    vec3 p, d = normalize(vec3(uv, .75));
+
+    for(float i = 0., e = 0., j = 0.; i++ < 35.0 * 1.0;) {
+      p = d * j / 0.6;
+      p.z += 1.0 + u_time / 1. * 0.006;
+      p.xy -= PI;
+      p = asin(sin(p / 2.) * .8) * 1.2;
+      float sc = .4 * 0.65;
+
+      for(float j = 0.0; j++ < 7.;) {
+        p.xy = abs(p.xy) - .35;
+        p.xy *= 1. + 0.195;
+        p = erot(p, normalize(vec3(
+          0.28,
+          0.0,
+          1.
+        )), -0.785);
+        sc *= 1.25;
+      }
+
+      float h = box2(
+        erot(
+          p,
+          vec3(.0, .0, 1.25),
+          floor(1.0 + length(uv * uv) + pow(dot(uv, uv), 1.0) * .5)).xy,
+          vec2(.01)
+        );
+
+      h = min(h, box2(p.xz, vec2(0.1 / 2.0)));
+      h = min(h, box2(p.yz, vec2(0.1 / 2.0)));
+      h /= sc;
+      j += e = max(.001, h);
+
+      col += (.8 + .3 * cos(vec3(.075, 2.1, .16) * i + floor(1. / 10. + length(uv * uv)))) * .1 / exp((.8 + p.z * .01) * i * i * e);
+    }
+
+    float r = 0.0 * (1.0 + 0.88);
+    float g = 0.4 * (1.0 + 0.08);
+    float b = 0.5 * (1.0 + 0.18);
+
+    col *= vec3(r, g, b);
+
+    outColor = vec4(col, 1.0);
 }
 `;
 
@@ -98,15 +122,13 @@ export function WebGL() {
     const vertexShader = compileShader(gl, vs, gl.VERTEX_SHADER);
     const fragmentShader = compileShader(gl, fs, gl.FRAGMENT_SHADER);
     const program = createProgram(gl, vertexShader, fragmentShader);
-
     const positionAttributeLocation = gl.getAttribLocation(program, "position");
 
     const vao = gl.createVertexArray();
     gl.bindVertexArray(vao);
 
     const positionBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
     gl.bufferData(
       gl.ARRAY_BUFFER,
       new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
@@ -121,7 +143,6 @@ export function WebGL() {
     uniformResolution = createUniform(gl, program, "2f", "u_resolution");
 
     gl.useProgram(program);
-
     gl.bindVertexArray(vao);
   };
 
@@ -135,8 +156,8 @@ export function WebGL() {
     setup,
     draw,
     options: {
-      height: 350,
-      width: 350,
+      height: 500,
+      width: 355,
       contextType: "webgl2",
       contextAttributes: {
         antialias: false,

example/app/05-game.js

@@ -91,7 +91,7 @@ export function Game() {
       if (input.current.includes("ArrowRight")) {
         x = x >= width - size ? width - size : x + speed;
       }
-      if (input.current.includes(" ")) {
+      if (input.current.includes("a")) {
         if (!isShooting) {
           isShooting = true;
           BULLETS.push(Bullet({ x: x, y }, context));

example/app/07-bounce-text.js

@@ -2,7 +2,7 @@
 import { useCanvas } from "@kirkegaard/react-use-canvas";
 
 export function BounceText() {
-  const string = "REACT CANVAS";
+  const string = "CANVAS<3";
   const size = 42;
   const spacing = 4;
   const trail = 10;

example/app/globals.css

@@ -1,4 +1,21 @@
 :root {
+  --shadow-color: 0deg 0% 0%;
+  --shadow-elevation-low: 0px 0.1px 0.2px hsl(var(--shadow-color) / 0),
+    0px 0.1px 0.2px hsl(var(--shadow-color) / 0.05),
+    0px 0.3px 0.5px hsl(var(--shadow-color) / 0.1);
+  --shadow-elevation-medium: 0px 0.1px 0.2px hsl(var(--shadow-color) / 0),
+    0px 0.3px 0.5px hsl(var(--shadow-color) / 0.04),
+    0.1px 0.7px 1.1px hsl(var(--shadow-color) / 0.08),
+    0.1px 1.4px 2.1px hsl(var(--shadow-color) / 0.12);
+  --shadow-elevation-high: 0px 0.1px 0.2px hsl(var(--shadow-color) / 0),
+    0.1px 0.6px 0.9px hsl(var(--shadow-color) / 0.02),
+    0.1px 1.1px 1.7px hsl(var(--shadow-color) / 0.04),
+    0.1px 1.6px 2.4px hsl(var(--shadow-color) / 0.06),
+    0.2px 2.2px 3.3px hsl(var(--shadow-color) / 0.07),
+    0.2px 3.1px 4.7px hsl(var(--shadow-color) / 0.09),
+    0.3px 4.3px 6.5px hsl(var(--shadow-color) / 0.11),
+    0.5px 5.9px 8.9px hsl(var(--shadow-color) / 0.13);
+
   --max-width: 1100px;
   --border-radius: 12px;
   --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
@@ -43,7 +60,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 10, 10, 10;
+    --background-start-rgb: 100, 10, 10;
     --background-end-rgb: 0, 0, 0;
 
     --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
@@ -88,12 +105,22 @@ body {
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+
+  background-image: linear-gradient(
+    45deg,
+    hsl(260deg 100% 2%) 0%,
+    hsl(236deg 45% 5%) 11%,
+    hsl(216deg 50% 7%) 22%,
+    hsl(205deg 67% 8%) 33%,
+    hsl(198deg 91% 8%) 44%,
+    hsl(193deg 100% 8%) 56%,
+    hsl(188deg 100% 9%) 67%,
+    hsl(181deg 100% 9%) 78%,
+    hsl(172deg 100% 10%) 89%,
+    hsl(164deg 100% 11%) 100%
+  );
+
+  padding: 2rem 0.8rem;
 
   display: flex;
   justify-content: center;
@@ -105,6 +132,13 @@ h3 {
   margin-bottom: 1rem;
 }
 
+h1 {
+  font-size: 3.6rem;
+  background: linear-gradient(90deg, #e21143, #ffb03a);
+  background-clip: text;
+  color: transparent;
+}
+
 p {
   margin: 1rem 0;
 }
@@ -113,9 +147,10 @@ section {
   margin-bottom: 2rem;
   padding: 1rem;
 
-  background-color: rgba(25, 25, 25, 0.5);
+  background-color: rgba(0, 0, 0, 0.2);
+
+  box-shadow: var(--shadow-elevation-high);
 
-  border: 2px solid rgba(20, 20, 20, 0.5);
   border-radius: 1rem;
 }