puzbox

Marathon session adding five new puzzles. Puzzle 19 kicks things off, followed by puzzle 20 which introduces turntable-style rotating track segments. Puzzle 21 features a complex multi-track layout with slot guides. Puzzle 22 uses LED timing bars where you need to match a rhythm. Puzzle 23 has a dial-aim mechanic where you rotate to target and capture LEDs.

Added a level selector to the menu so players can jump to any completed puzzle. This was a quality-of-life improvement I’d been wanting for a while.

Fixed a slider drag bug where the knob could teleport or ghost to unexpected positions during fast drags. Also fixed closed-loop self-connections in the track system. Extracted TrackChain and renderChains as reusable components for the segmented slider’s chain rendering. Added a Playwright test for puzzle 12.

Big day — added three new puzzles and did a significant refactoring pass. Puzzle 16 is a directional lock mechanic. Puzzle 17 introduces a wrapping slider, a new shared component where the knob wraps around from one end of the track back to the start. Puzzle 18 builds on that foundation with another variation.

Extracted helper modules from several large components that had grown unwieldy. SegmentedSlider3D, Switch3D, and puzzles 09, 12, and 14 all got split into focused helper files. Also extracted useSliderDrag and useSwitchDrag hooks, and pulled geometry utilities out of trackPath.ts into a dedicated trackPathGeometry.ts. The TestAPI component got the same treatment with a new testApiHelpers.ts.

Created a shared puzzle components directory with reusable pieces like WrappingSlider, useWrappingSliderSnap, and snapToNearest. Updated the game complete modal to reflect the new final puzzle number.

Added a game completion modal that appears when the player finishes the final puzzle. It triggers a confetti fireworks display using canvas-confetti, launching particles from both sides of the screen in colorful bursts. The modal thanks the player and links to the Reddit thread for feedback. Also cleaned up an unused soundEnabledAtom from the menu state.

Added a menu and level indicator overlay so players can see which puzzle they’re on and navigate between them. Also implemented a ?level=x URL parameter for direct level access - useful for sharing specific puzzles or resuming progress.

Cleaned up the menu by removing some extra options and switched to a fixed LED pattern for consistency.

Big day wrapping up the year with four new puzzles. Puzzle12 introduces slider loop mechanics with LED dimming based on position. Puzzle13 adds a new rocker-style Switch3D widget for on/off toggling. Puzzle14 features mixed LED positions across multiple faces with back-facing widgets. Puzzle15 rounds things out with color matching LEDs.

Made several widget improvements - widened the Switch3D for better mobile usability, added disabled and color props to SegmentedSlider3D, and stacked three LEDs per face on Puzzle12 for a cleaner look.

Integrated error and usage tracking with Sentry and Google Analytics, including custom events for level starts and completions. This will help identify where players get stuck and catch any runtime errors in production.

Fixed various edge cases including dial-to-slider angle mapping, puzzle09’s finish button behavior, and puzzle05’s initial dial angle. Also enforced trackPath requirements for SegmentedSlider3D to prevent configuration issues.

Productive day with three new puzzles. Puzzle09 introduces LED toggle buttons where pressing changes the LED color. Puzzle10 features rotating LEDs that spin based on dial input. Puzzle11 is the most complex yet, with a depth-split shell design and a new segmented slider widget that snaps between discrete positions along a track.

Added a declarative track path compiler for defining slider paths, and implemented snap-to-edge behavior for the Dial3D widget so it locks to specific angles.

Set up Playwright testing infrastructure to automate puzzle solving. Created tests for puzzles 04, 05, and 11 with reusable fixtures for widget interactions. This will help catch regressions as the puzzle mechanics get more sophisticated.

Fixed some alignment issues with puzzle09’s LED buttons and corrected the dial-to-LED angle offset in puzzle05. Also synced dial rotation to the device hinge animation for smoother visual feedback.

Added Puzzle08 which introduces a hinged box mechanism using CSG (Constructive Solid Geometry). The hinge opens based on dial rotation, revealing the interior. This is the first puzzle to use 3D geometry manipulation beyond the standard widget primitives.

Added Puzzle07 today, which uses sliders to control LED colors - a variation on the dial-controlled puzzles but with linear input. Also enhanced Puzzle02 by adding progress bars to the buttons for visual feedback.

Fixed a couple of interaction issues: blocked click events from passing through the DeviceShell so widgets underneath don’t accidentally activate, and improved the iOS motion permission flow to auto-request on first tap rather than requiring a manual trigger.

Updated the project docs with a listing of all the widget types.

Launched puzbox today - an interactive 3D puzzle box built with React Three Fiber. The concept is a virtual “magic box” device with physical widgets like buttons, sliders, dials, and LEDs that players manipulate to solve puzzles.

Built out six puzzles with increasing complexity. The first few introduce basic interactions - pressing buttons, moving sliders, watching LEDs respond. Later puzzles combine multiple widgets, like Puzzle06 where dial rotation controls slider positions. Each puzzle has its own state managed through Jotai atoms, with a progression system that unlocks the next puzzle on completion.

The widget library includes interactive components (Button3D, Slider3D, Dial3D, Switch3D) and display widgets (LED3D, ProgressBar3D). Getting touch interactions right on iOS took several iterations - fixed issues with button press states, OrbitControls getting stuck, and Safari-specific touch handling quirks.

Added some polish features: mouse parallax effect that tilts the device as you move the cursor, gyroscope support for the same effect on mobile, and a debug pane with tweakpane for adjusting colors, materials, and selecting puzzles during development. The debug pane persists its state so settings survive page reloads.

Set up GitHub Actions for deployment and configured Vite with the right base paths for hosting.