feat(docs): asteroid tilt fix, dual-stick icons, observatory joystick border

Asteroid Dodge:
- Pre-clear canvas before tilt to hide edge artifacts
- Overdraw background by 40px padding for corner coverage
- More visible motion lines (0.25 opacity, 1.5px width)

Dual-Stick Arena:
- Move icon (4-way arrows) on left joystick thumb
- Shoot icon (crosshair) on right joystick thumb
- Uses SVG files layered over gradient backgrounds

Space Observatory:
- Joystick back ring more visible with harder-edge radial gradient
  that creates a visible border at 93% radius

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: yoannmoinet

packages/docs/public/assets/move.svg

@@ -172,19 +172,21 @@ export const createGame: CreateGame = (_container) => {
             }
 
             function drawBackground() {
+                // Overdraw background to cover corners exposed by canvas tilt
+                const pad = 40;
                 ctx.fillStyle = BG_COLOR;
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.fillRect(-pad, -pad, canvas.width + pad * 2, canvas.height + pad * 2);
 
-                // Draw subtle vertical motion lines
+                // Draw vertical motion lines
                 ctx.save();
                 for (const line of bgLines) {
                     line.y += line.speed;
                     if (line.y > canvas.height) {
                         line.y = -line.length;
                         line.x = Math.random() * canvas.width;
                     }
-                    ctx.strokeStyle = 'rgba(56, 189, 248, 0.15)';
-                    ctx.lineWidth = 1;
+                    ctx.strokeStyle = 'rgba(56, 189, 248, 0.25)';
+                    ctx.lineWidth = 1.5;
                     ctx.beginPath();
                     ctx.moveTo(line.x, line.y);
                     ctx.lineTo(line.x, line.y + line.length);
@@ -382,6 +384,10 @@ export const createGame: CreateGame = (_container) => {
                 const tiltTarget = vectorX * -0.03;
                 tilt += (tiltTarget - tilt) * 0.1;
 
+                // Clear canvas before tilt so edges are clean
+                ctx.fillStyle = BG_COLOR;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
                 ctx.save();
                 if (shakeTime > 0) {
                     const intensity = shakeTime / 12;

packages/docs/public/assets/shoot.svg

@@ -42,7 +42,7 @@ export const createGame: CreateGame = (_container) => {
                         mode: 'static',
                         position: { left: '100px', bottom: '100px' },
                         color: {
-                            front: 'linear-gradient(135deg, #818cf8, #38bdf8)',
+                            front: 'url("/nipplejs/assets/move.svg") center/60% no-repeat, linear-gradient(135deg, #818cf8, #38bdf8)',
                             back: 'rgba(99,102,241,0.12)',
                         },
                     },
@@ -53,7 +53,7 @@ export const createGame: CreateGame = (_container) => {
                         mode: 'static',
                         position: { right: '100px', bottom: '100px' },
                         color: {
-                            front: 'linear-gradient(135deg, #e879f9, #ec4899)',
+                            front: 'url("/nipplejs/assets/shoot.svg") center/60% no-repeat, linear-gradient(135deg, #e879f9, #ec4899)',
                             back: 'rgba(236,72,153,0.12)',
                         },
                     },

packages/docs/src/games/asteroid-dodge.ts

@@ -63,7 +63,7 @@ export const createGame: CreateGame = (_container) => {
                         follow: true,
                         color: {
                             front: 'url("/nipplejs/assets/scope.svg") center/cover',
-                            back: 'radial-gradient(circle, rgba(56,189,248,0.12) 40%, rgba(56,189,248,0.03) 100%)',
+                            back: 'radial-gradient(circle, rgba(56,189,248,0.08) 0%, rgba(56,189,248,0.15) 85%, rgba(56,189,248,0.4) 93%, rgba(56,189,248,0.15) 100%)',
                         },
                     },
                     position: { left: '0', top: '0', width: '100%', height: '100%' },