lostpage 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +390 -2
- package/dist/catalog.d.ts +2 -0
- package/dist/catalog.js +1 -0
- package/dist/catalog.json +11438 -0
- package/dist/cdn/c/ascii-3d-LO5K5SPJ.js +3 -0
- package/dist/cdn/c/astronaut-LH5N45GT.js +2 -0
- package/dist/cdn/c/aurora-XF7DCQ7M.js +129 -0
- package/dist/cdn/c/autumn-V5GRVYCX.js +1 -0
- package/dist/cdn/c/balloon-404-KV6ISJWV.js +1 -0
- package/dist/cdn/c/beach-OGS53KAQ.js +95 -0
- package/dist/cdn/c/black-hole-635WWF67.js +124 -0
- package/dist/cdn/c/block-drop-QU7NYBNQ.js +1 -0
- package/dist/cdn/c/blue-screen-GKLGT7XD.js +70 -0
- package/dist/cdn/c/breakout-EGDE3QDC.js +1 -0
- package/dist/cdn/c/bricks-C6XPPQ64.js +1 -0
- package/dist/cdn/c/broken-link-U47D6LR2.js +11 -0
- package/dist/cdn/c/brutalist-QFXIHFAD.js +15 -0
- package/dist/cdn/c/bubble-wrap-45ZWIQMW.js +1 -0
- package/dist/cdn/c/campfire-TFG4DUUS.js +88 -0
- package/dist/cdn/c/card-GH5VVMRG.js +15 -0
- package/dist/cdn/c/cassette-33OUQ4CF.js +15 -0
- package/dist/cdn/c/chalkboard-NAPUHNER.js +3 -0
- package/dist/cdn/c/chrome-404-QVPFIQEF.js +1 -0
- package/dist/cdn/c/chunk-4ZBXB36L.js +1 -0
- package/dist/cdn/c/chunk-A44JMJWI.js +1 -0
- package/dist/cdn/c/chunk-HXSSPN2I.js +1 -0
- package/dist/cdn/c/chunk-IETNWEVK.js +1 -0
- package/dist/cdn/c/chunk-JLRXT2AZ.js +4 -0
- package/dist/cdn/c/chunk-LMRCHEWX.js +1 -0
- package/dist/cdn/c/chunk-NUQBEDA4.js +296 -0
- package/dist/cdn/c/chunk-QHXVYCR6.js +1 -0
- package/dist/cdn/c/chunk-QJZBGT2Q.js +75 -0
- package/dist/cdn/c/chunk-URWX3LLV.js +1 -0
- package/dist/cdn/c/chunk-YNREKTFR.js +70 -0
- package/dist/cdn/c/circuit-board-V6VT4OTX.js +1 -0
- package/dist/cdn/c/claw-machine-LLCPLZ6W.js +1 -0
- package/dist/cdn/c/clay-404-SMDVAQCV.js +1 -0
- package/dist/cdn/c/constellation-J5QMY7IB.js +1 -0
- package/dist/cdn/c/countdown-2TEFVO73.js +14 -0
- package/dist/cdn/c/cross-stitch-N5H5GLAG.js +2 -0
- package/dist/cdn/c/deep-sea-ILDVMW5M.js +85 -0
- package/dist/cdn/c/divider-PMT4UZEF.js +9 -0
- package/dist/cdn/c/dna-CAAKBMRK.js +2 -0
- package/dist/cdn/c/dominoes-VLA5MBXM.js +1 -0
- package/dist/cdn/c/dot-grid-O7LJO44U.js +11 -0
- package/dist/cdn/c/editorial-4C5Z33WO.js +11 -0
- package/dist/cdn/c/elevator-EFNB6FVO.js +36 -0
- package/dist/cdn/c/emoji-EHAJDQSM.js +8 -0
- package/dist/cdn/c/error-cascade-CIJCQLP3.js +18 -0
- package/dist/cdn/c/evidence-board-Z7DXMGNE.js +18 -0
- package/dist/cdn/c/eyes-VPOHW2CX.js +2 -0
- package/dist/cdn/c/fireworks-QLWJ3S43.js +1 -0
- package/dist/cdn/c/flashlight-QXI7QT74.js +57 -0
- package/dist/cdn/c/flatline-3GBK7IVS.js +1 -0
- package/dist/cdn/c/flock-RLSZ7EZQ.js +1 -0
- package/dist/cdn/c/foggy-glass-A56REA7E.js +1 -0
- package/dist/cdn/c/gears-4HJO7H74.js +5 -0
- package/dist/cdn/c/glass-404-WZRMDFTP.js +1 -0
- package/dist/cdn/c/glitch-Y4CIADF3.js +60 -0
- package/dist/cdn/c/gradient-404-YNSTOPNA.js +6 -0
- package/dist/cdn/c/halftone-XZ7F75B4.js +43 -0
- package/dist/cdn/c/hanging-letters-Y3VH7EVP.js +1 -0
- package/dist/cdn/c/hanging-sign-2KUXPLZE.js +1 -0
- package/dist/cdn/c/helpful-links-UFGTWTRQ.js +18 -0
- package/dist/cdn/c/hyperspace-R34QNI7J.js +57 -0
- package/dist/cdn/c/hypnosis-MK6AV3SC.js +26 -0
- package/dist/cdn/c/ink-S332BOPS.js +43 -0
- package/dist/cdn/c/invaders-ZSY3Z443.js +1 -0
- package/dist/cdn/c/kaleidoscope-BLGSIK4F.js +34 -0
- package/dist/cdn/c/lava-lamp-VYY5XFG5.js +55 -0
- package/dist/cdn/c/life-QBWZL5FY.js +1 -0
- package/dist/cdn/c/lighthouse-QX7QIIPX.js +60 -0
- package/dist/cdn/c/loading-LIS67QF7.js +34 -0
- package/dist/cdn/c/lost-at-sea-QNURIHBY.js +258 -0
- package/dist/cdn/c/magic-8-ball-W3TRJALZ.js +2 -0
- package/dist/cdn/c/matrix-rain-4V4SVGGG.js +3 -0
- package/dist/cdn/c/maze-QL5TRCE5.js +1 -0
- package/dist/cdn/c/mesh-gradient-UISGI62K.js +34 -0
- package/dist/cdn/c/metro-map-H64EHOZM.js +30 -0
- package/dist/cdn/c/milk-carton-3SDLA5AY.js +53 -0
- package/dist/cdn/c/minimal-SB6FU3DE.js +9 -0
- package/dist/cdn/c/mirage-IQ3IA3VB.js +70 -0
- package/dist/cdn/c/moon-landing-TKZE4Q6G.js +1 -0
- package/dist/cdn/c/neon-sign-XGMN75MH.js +1 -0
- package/dist/cdn/c/newspaper-YECAUY77.js +49 -0
- package/dist/cdn/c/nixie-CQBRCVDE.js +1 -0
- package/dist/cdn/c/no-signal-HL4A4CFZ.js +82 -0
- package/dist/cdn/c/one-bit-AFIZQPHK.js +49 -0
- package/dist/cdn/c/outline-404-REB5E5EN.js +9 -0
- package/dist/cdn/c/paint-splash-GZGPOURW.js +1 -0
- package/dist/cdn/c/paper-plane-KDCSE3RM.js +2 -0
- package/dist/cdn/c/particles-7UMRMT2M.js +1 -0
- package/dist/cdn/c/path-not-found-VUEXOVO7.js +14 -0
- package/dist/cdn/c/planet-H6QGPDVC.js +157 -0
- package/dist/cdn/c/pond-6DL43VUQ.js +106 -0
- package/dist/cdn/c/pong-B2ZGAY7T.js +1 -0
- package/dist/cdn/c/radar-22JCPGQZ.js +4 -0
- package/dist/cdn/c/rainy-window-DTGLJVAR.js +114 -0
- package/dist/cdn/c/receipt-ZOYUSMN3.js +32 -0
- package/dist/cdn/c/road-closed-3OS55UBX.js +1 -0
- package/dist/cdn/c/rpg-dialog-FV53YYNJ.js +14 -0
- package/dist/cdn/c/runner-NANXJTQG.js +1 -0
- package/dist/cdn/c/scratch-card-GC6U4ZZN.js +1 -0
- package/dist/cdn/c/screensaver-UXKJVQUU.js +1 -0
- package/dist/cdn/c/search-404-HFKZ4DUA.js +17 -0
- package/dist/cdn/c/server-default-RBMMRAHS.js +10 -0
- package/dist/cdn/c/server-room-QSKAUFUY.js +1 -0
- package/dist/cdn/c/skyline-OMZMF5R6.js +1 -0
- package/dist/cdn/c/skywriting-RYNQWJ6I.js +1 -0
- package/dist/cdn/c/slot-machine-XXCVI2HK.js +33 -0
- package/dist/cdn/c/snake-6Z5V3QA3.js +1 -0
- package/dist/cdn/c/snow-globe-RLDPNA2J.js +2 -0
- package/dist/cdn/c/soft-blobs-FYEFGINV.js +15 -0
- package/dist/cdn/c/solar-system-CQAP6WFU.js +2 -0
- package/dist/cdn/c/split-flap-O7JGD5Q4.js +37 -0
- package/dist/cdn/c/split-panel-QGXZ24E4.js +12 -0
- package/dist/cdn/c/stage-GBZR3JQS.js +2 -0
- package/dist/cdn/c/swiss-poster-OON4HBUG.js +20 -0
- package/dist/cdn/c/terminal-7BTUDZDB.js +41 -0
- package/dist/cdn/c/thunderstorm-FRCKHKXY.js +1 -0
- package/dist/cdn/c/topographic-3RIQXKIQ.js +38 -0
- package/dist/cdn/c/torn-page-6UT5ZQHG.js +16 -0
- package/dist/cdn/c/treasure-map-FALAEBL5.js +3 -0
- package/dist/cdn/c/typewriter-7TIO42MH.js +23 -0
- package/dist/cdn/c/ufo-6UW34TI3.js +1 -0
- package/dist/cdn/c/unplugged-QXKDDH4S.js +1 -0
- package/dist/cdn/c/vending-machine-SH3MNFMY.js +27 -0
- package/dist/cdn/c/vinyl-3FUP3LSO.js +2 -0
- package/dist/cdn/c/voxel-404-LMC43X4B.js +102 -0
- package/dist/cdn/c/wormhole-I2RWIMRW.js +113 -0
- package/dist/cdn/c/zen-garden-HMAMASJK.js +1 -0
- package/dist/cdn/element.js +1 -0
- package/dist/cdn/index.js +1 -0
- package/dist/chunks/chunk-3ISI6SOJ.js +1 -0
- package/dist/chunks/chunk-6HZC24J2.js +296 -0
- package/dist/chunks/chunk-7XMDQMDO.js +1 -0
- package/dist/chunks/chunk-B2NBRLO2.js +1 -0
- package/dist/chunks/chunk-B4TY5M55.js +1 -0
- package/dist/chunks/chunk-DAZOIOF7.js +1 -0
- package/dist/chunks/chunk-ES56TX4X.js +1 -0
- package/dist/chunks/chunk-FVGCB66F.js +1 -0
- package/dist/chunks/chunk-KIYSQVWX.js +1 -0
- package/dist/chunks/chunk-MNUNTC4L.js +4 -0
- package/dist/chunks/chunk-SH72TE6I.js +75 -0
- package/dist/chunks/chunk-URB3NNOB.js +70 -0
- package/dist/cli.js +97 -0
- package/dist/core/canvas2d.d.ts +18 -0
- package/dist/core/define.d.ts +16 -0
- package/dist/core/gl.d.ts +50 -0
- package/dist/core/glsl.d.ts +10 -0
- package/dist/core/overlay.d.ts +5 -0
- package/dist/core/runtime.d.ts +8 -0
- package/dist/core/shader.d.ts +22 -0
- package/dist/core/styles.d.ts +4 -0
- package/dist/core/text.d.ts +54 -0
- package/dist/core/types.d.ts +170 -0
- package/dist/core/util.d.ts +16 -0
- package/dist/core.d.ts +8 -0
- package/dist/core.js +1 -0
- package/dist/element.cdn.js +1 -0
- package/dist/element.d.ts +21 -0
- package/dist/element.js +1 -0
- package/dist/engines/arcade.d.ts +25 -0
- package/dist/engines/text3d.d.ts +37 -0
- package/dist/generated/all.d.ts +2 -0
- package/dist/generated/catalog.d.ts +2 -0
- package/dist/generated/registry.d.ts +5 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.js +1 -0
- package/dist/lostpage.global.js +3222 -0
- package/dist/react.d.ts +21 -0
- package/dist/react.js +2 -0
- package/dist/scenes/_simple.d.ts +10 -0
- package/dist/scenes/ascii-3d.d.ts +10 -0
- package/dist/scenes/ascii-3d.js +3 -0
- package/dist/scenes/astronaut.d.ts +10 -0
- package/dist/scenes/astronaut.js +2 -0
- package/dist/scenes/aurora.d.ts +14 -0
- package/dist/scenes/aurora.js +129 -0
- package/dist/scenes/autumn.d.ts +8 -0
- package/dist/scenes/autumn.js +1 -0
- package/dist/scenes/balloon-404.d.ts +9 -0
- package/dist/scenes/balloon-404.js +1 -0
- package/dist/scenes/beach.d.ts +14 -0
- package/dist/scenes/beach.js +95 -0
- package/dist/scenes/black-hole.d.ts +15 -0
- package/dist/scenes/black-hole.js +124 -0
- package/dist/scenes/block-drop.d.ts +9 -0
- package/dist/scenes/block-drop.js +1 -0
- package/dist/scenes/blue-screen.d.ts +5 -0
- package/dist/scenes/blue-screen.js +70 -0
- package/dist/scenes/breakout.d.ts +10 -0
- package/dist/scenes/breakout.js +1 -0
- package/dist/scenes/bricks.d.ts +7 -0
- package/dist/scenes/bricks.js +1 -0
- package/dist/scenes/broken-link.d.ts +8 -0
- package/dist/scenes/broken-link.js +11 -0
- package/dist/scenes/brutalist.d.ts +7 -0
- package/dist/scenes/brutalist.js +15 -0
- package/dist/scenes/bubble-wrap.d.ts +9 -0
- package/dist/scenes/bubble-wrap.js +1 -0
- package/dist/scenes/campfire.d.ts +11 -0
- package/dist/scenes/campfire.js +88 -0
- package/dist/scenes/card.d.ts +8 -0
- package/dist/scenes/card.js +15 -0
- package/dist/scenes/cassette.d.ts +9 -0
- package/dist/scenes/cassette.js +15 -0
- package/dist/scenes/chalkboard.d.ts +8 -0
- package/dist/scenes/chalkboard.js +3 -0
- package/dist/scenes/chrome-404.d.ts +13 -0
- package/dist/scenes/chrome-404.js +1 -0
- package/dist/scenes/circuit-board.d.ts +9 -0
- package/dist/scenes/circuit-board.js +1 -0
- package/dist/scenes/claw-machine.d.ts +8 -0
- package/dist/scenes/claw-machine.js +1 -0
- package/dist/scenes/clay-404.d.ts +11 -0
- package/dist/scenes/clay-404.js +1 -0
- package/dist/scenes/constellation.d.ts +10 -0
- package/dist/scenes/constellation.js +1 -0
- package/dist/scenes/countdown.d.ts +9 -0
- package/dist/scenes/countdown.js +14 -0
- package/dist/scenes/cross-stitch.d.ts +8 -0
- package/dist/scenes/cross-stitch.js +2 -0
- package/dist/scenes/deep-sea.d.ts +9 -0
- package/dist/scenes/deep-sea.js +85 -0
- package/dist/scenes/divider.d.ts +6 -0
- package/dist/scenes/divider.js +9 -0
- package/dist/scenes/dna.d.ts +9 -0
- package/dist/scenes/dna.js +2 -0
- package/dist/scenes/dominoes.d.ts +9 -0
- package/dist/scenes/dominoes.js +1 -0
- package/dist/scenes/dot-grid.d.ts +9 -0
- package/dist/scenes/dot-grid.js +11 -0
- package/dist/scenes/editorial.d.ts +6 -0
- package/dist/scenes/editorial.js +11 -0
- package/dist/scenes/elevator.d.ts +10 -0
- package/dist/scenes/elevator.js +36 -0
- package/dist/scenes/emoji.d.ts +7 -0
- package/dist/scenes/emoji.js +8 -0
- package/dist/scenes/error-cascade.d.ts +6 -0
- package/dist/scenes/error-cascade.js +18 -0
- package/dist/scenes/evidence-board.d.ts +7 -0
- package/dist/scenes/evidence-board.js +18 -0
- package/dist/scenes/eyes.d.ts +12 -0
- package/dist/scenes/eyes.js +2 -0
- package/dist/scenes/fireworks.d.ts +8 -0
- package/dist/scenes/fireworks.js +1 -0
- package/dist/scenes/flashlight.d.ts +12 -0
- package/dist/scenes/flashlight.js +57 -0
- package/dist/scenes/flatline.d.ts +9 -0
- package/dist/scenes/flatline.js +1 -0
- package/dist/scenes/flock.d.ts +13 -0
- package/dist/scenes/flock.js +1 -0
- package/dist/scenes/foggy-glass.d.ts +9 -0
- package/dist/scenes/foggy-glass.js +1 -0
- package/dist/scenes/gears.d.ts +10 -0
- package/dist/scenes/gears.js +5 -0
- package/dist/scenes/glass-404.d.ts +11 -0
- package/dist/scenes/glass-404.js +1 -0
- package/dist/scenes/glitch.d.ts +15 -0
- package/dist/scenes/glitch.js +60 -0
- package/dist/scenes/gradient-404.d.ts +9 -0
- package/dist/scenes/gradient-404.js +6 -0
- package/dist/scenes/halftone.d.ts +11 -0
- package/dist/scenes/halftone.js +43 -0
- package/dist/scenes/hanging-letters.d.ts +10 -0
- package/dist/scenes/hanging-letters.js +1 -0
- package/dist/scenes/hanging-sign.d.ts +9 -0
- package/dist/scenes/hanging-sign.js +1 -0
- package/dist/scenes/helpful-links.d.ts +6 -0
- package/dist/scenes/helpful-links.js +18 -0
- package/dist/scenes/hyperspace.d.ts +11 -0
- package/dist/scenes/hyperspace.js +57 -0
- package/dist/scenes/hypnosis.d.ts +10 -0
- package/dist/scenes/hypnosis.js +26 -0
- package/dist/scenes/ink.d.ts +10 -0
- package/dist/scenes/ink.js +43 -0
- package/dist/scenes/invaders.d.ts +10 -0
- package/dist/scenes/invaders.js +1 -0
- package/dist/scenes/kaleidoscope.d.ts +10 -0
- package/dist/scenes/kaleidoscope.js +34 -0
- package/dist/scenes/lava-lamp.d.ts +11 -0
- package/dist/scenes/lava-lamp.js +55 -0
- package/dist/scenes/life.d.ts +13 -0
- package/dist/scenes/life.js +1 -0
- package/dist/scenes/lighthouse.d.ts +11 -0
- package/dist/scenes/lighthouse.js +60 -0
- package/dist/scenes/loading.d.ts +6 -0
- package/dist/scenes/loading.js +34 -0
- package/dist/scenes/lost-at-sea.d.ts +35 -0
- package/dist/scenes/lost-at-sea.js +258 -0
- package/dist/scenes/magic-8-ball.d.ts +10 -0
- package/dist/scenes/magic-8-ball.js +2 -0
- package/dist/scenes/matrix-rain.d.ts +13 -0
- package/dist/scenes/matrix-rain.js +3 -0
- package/dist/scenes/maze.d.ts +9 -0
- package/dist/scenes/maze.js +1 -0
- package/dist/scenes/mesh-gradient.d.ts +13 -0
- package/dist/scenes/mesh-gradient.js +34 -0
- package/dist/scenes/metro-map.d.ts +8 -0
- package/dist/scenes/metro-map.js +30 -0
- package/dist/scenes/milk-carton.d.ts +9 -0
- package/dist/scenes/milk-carton.js +53 -0
- package/dist/scenes/minimal.d.ts +6 -0
- package/dist/scenes/minimal.js +9 -0
- package/dist/scenes/mirage.d.ts +10 -0
- package/dist/scenes/mirage.js +70 -0
- package/dist/scenes/moon-landing.d.ts +8 -0
- package/dist/scenes/moon-landing.js +1 -0
- package/dist/scenes/neon-sign.d.ts +15 -0
- package/dist/scenes/neon-sign.js +1 -0
- package/dist/scenes/newspaper.d.ts +10 -0
- package/dist/scenes/newspaper.js +49 -0
- package/dist/scenes/nixie.d.ts +11 -0
- package/dist/scenes/nixie.js +1 -0
- package/dist/scenes/no-signal.d.ts +11 -0
- package/dist/scenes/no-signal.js +82 -0
- package/dist/scenes/one-bit.d.ts +8 -0
- package/dist/scenes/one-bit.js +49 -0
- package/dist/scenes/outline-404.d.ts +8 -0
- package/dist/scenes/outline-404.js +9 -0
- package/dist/scenes/paint-splash.d.ts +6 -0
- package/dist/scenes/paint-splash.js +1 -0
- package/dist/scenes/paper-plane.d.ts +9 -0
- package/dist/scenes/paper-plane.js +2 -0
- package/dist/scenes/particles.d.ts +22 -0
- package/dist/scenes/particles.js +1 -0
- package/dist/scenes/path-not-found.d.ts +6 -0
- package/dist/scenes/path-not-found.js +14 -0
- package/dist/scenes/planet.d.ts +19 -0
- package/dist/scenes/planet.js +157 -0
- package/dist/scenes/pond.d.ts +11 -0
- package/dist/scenes/pond.js +106 -0
- package/dist/scenes/pong.d.ts +8 -0
- package/dist/scenes/pong.js +1 -0
- package/dist/scenes/radar.d.ts +9 -0
- package/dist/scenes/radar.js +4 -0
- package/dist/scenes/rainy-window.d.ts +11 -0
- package/dist/scenes/rainy-window.js +114 -0
- package/dist/scenes/receipt.d.ts +8 -0
- package/dist/scenes/receipt.js +32 -0
- package/dist/scenes/road-closed.d.ts +9 -0
- package/dist/scenes/road-closed.js +1 -0
- package/dist/scenes/rpg-dialog.d.ts +11 -0
- package/dist/scenes/rpg-dialog.js +14 -0
- package/dist/scenes/runner.d.ts +10 -0
- package/dist/scenes/runner.js +1 -0
- package/dist/scenes/scratch-card.d.ts +9 -0
- package/dist/scenes/scratch-card.js +1 -0
- package/dist/scenes/screensaver.d.ts +8 -0
- package/dist/scenes/screensaver.js +1 -0
- package/dist/scenes/search-404.d.ts +9 -0
- package/dist/scenes/search-404.js +17 -0
- package/dist/scenes/server-default.d.ts +6 -0
- package/dist/scenes/server-default.js +10 -0
- package/dist/scenes/server-room.d.ts +9 -0
- package/dist/scenes/server-room.js +1 -0
- package/dist/scenes/skyline.d.ts +10 -0
- package/dist/scenes/skyline.js +1 -0
- package/dist/scenes/skywriting.d.ts +8 -0
- package/dist/scenes/skywriting.js +1 -0
- package/dist/scenes/slot-machine.d.ts +10 -0
- package/dist/scenes/slot-machine.js +33 -0
- package/dist/scenes/snake.d.ts +13 -0
- package/dist/scenes/snake.js +1 -0
- package/dist/scenes/snow-globe.d.ts +10 -0
- package/dist/scenes/snow-globe.js +2 -0
- package/dist/scenes/soft-blobs.d.ts +9 -0
- package/dist/scenes/soft-blobs.js +15 -0
- package/dist/scenes/solar-system.d.ts +9 -0
- package/dist/scenes/solar-system.js +2 -0
- package/dist/scenes/split-flap.d.ts +15 -0
- package/dist/scenes/split-flap.js +37 -0
- package/dist/scenes/split-panel.d.ts +8 -0
- package/dist/scenes/split-panel.js +12 -0
- package/dist/scenes/stage.d.ts +10 -0
- package/dist/scenes/stage.js +2 -0
- package/dist/scenes/swiss-poster.d.ts +9 -0
- package/dist/scenes/swiss-poster.js +20 -0
- package/dist/scenes/terminal.d.ts +13 -0
- package/dist/scenes/terminal.js +41 -0
- package/dist/scenes/thunderstorm.d.ts +11 -0
- package/dist/scenes/thunderstorm.js +1 -0
- package/dist/scenes/topographic.d.ts +13 -0
- package/dist/scenes/topographic.js +38 -0
- package/dist/scenes/torn-page.d.ts +9 -0
- package/dist/scenes/torn-page.js +16 -0
- package/dist/scenes/treasure-map.d.ts +10 -0
- package/dist/scenes/treasure-map.js +3 -0
- package/dist/scenes/typewriter.d.ts +10 -0
- package/dist/scenes/typewriter.js +23 -0
- package/dist/scenes/ufo.d.ts +11 -0
- package/dist/scenes/ufo.js +1 -0
- package/dist/scenes/unplugged.d.ts +9 -0
- package/dist/scenes/unplugged.js +1 -0
- package/dist/scenes/vending-machine.d.ts +7 -0
- package/dist/scenes/vending-machine.js +27 -0
- package/dist/scenes/vinyl.d.ts +9 -0
- package/dist/scenes/vinyl.js +2 -0
- package/dist/scenes/voxel-404.d.ts +13 -0
- package/dist/scenes/voxel-404.js +102 -0
- package/dist/scenes/wormhole.d.ts +13 -0
- package/dist/scenes/wormhole.js +113 -0
- package/dist/scenes/zen-garden.d.ts +8 -0
- package/dist/scenes/zen-garden.js +1 -0
- package/dist/svelte.d.ts +17 -0
- package/dist/svelte.js +1 -0
- package/dist/vue.d.ts +66 -0
- package/dist/vue.js +1 -0
- package/package.json +114 -4
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import{b as T}from"./chunk-QHXVYCR6.js";import{a as F,b as W,c as Q,g as _}from"./chunk-HXSSPN2I.js";import{e as D}from"./chunk-URWX3LLV.js";var le=`
|
|
2
|
+
.lp-root{
|
|
3
|
+
--lp-bg:#0b0d12;--lp-fg:#f5f6f8;--lp-muted:color-mix(in srgb,var(--lp-fg) 64%,transparent);
|
|
4
|
+
--lp-accent:var(--lp-fg);--lp-accent-fg:var(--lp-bg);
|
|
5
|
+
--lp-font:"Inter","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
|
6
|
+
--lp-font-display:var(--lp-font);
|
|
7
|
+
--lp-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
|
8
|
+
--lp-font-serif:"Fraunces","Playfair Display",ui-serif,Georgia,"Times New Roman",serif;
|
|
9
|
+
--lp-code-color:color-mix(in srgb,var(--lp-fg) 22%,transparent);
|
|
10
|
+
--lp-code-size:clamp(64px,23cqw,300px);--lp-code-weight:500;
|
|
11
|
+
--lp-title-size:clamp(22px,4.6cqw,58px);--lp-title-weight:500;
|
|
12
|
+
--lp-radius:999px;--lp-pad:clamp(14px,5cqw,72px);
|
|
13
|
+
position:relative;box-sizing:border-box;overflow:hidden;width:100%;
|
|
14
|
+
height:var(--lp-height,100vh);height:var(--lp-height,100dvh);
|
|
15
|
+
background:var(--lp-bg);color:var(--lp-fg);font-family:var(--lp-font);
|
|
16
|
+
isolation:isolate;container-type:size;container-name:lp;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
|
|
17
|
+
text-rendering:optimizeLegibility;touch-action:manipulation;
|
|
18
|
+
}
|
|
19
|
+
.lp-root *,.lp-root *::before,.lp-root *::after{box-sizing:border-box}
|
|
20
|
+
.lp-root [hidden]{display:none!important}
|
|
21
|
+
.lp-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
|
|
22
|
+
.lp-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
|
|
23
|
+
.lp-custom{position:absolute;inset:0;z-index:3}
|
|
24
|
+
.lp-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
|
|
25
|
+
justify-content:center;gap:clamp(12px,3cqh,32px);padding:var(--lp-pad) max(16px,var(--lp-pad));pointer-events:none}
|
|
26
|
+
.lp-overlay a,.lp-overlay button,.lp-overlay [data-lp-interactive]{pointer-events:auto}
|
|
27
|
+
.lp-head,.lp-body{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%}
|
|
28
|
+
.lp-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--lp-muted)}
|
|
29
|
+
.lp-code{margin:0;font-family:var(--lp-font-display);font-weight:var(--lp-code-weight);font-size:var(--lp-code-size);
|
|
30
|
+
line-height:.86;letter-spacing:-.045em;color:var(--lp-code-color);user-select:none;white-space:nowrap}
|
|
31
|
+
.lp-title{margin:0;font-family:var(--lp-font-display);font-size:var(--lp-title-size);font-weight:var(--lp-title-weight);
|
|
32
|
+
letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
|
|
33
|
+
.lp-message{margin:14px 0 0;max-width:36ch;color:var(--lp-muted);font-size:clamp(12.5px,1.25cqw,16px);line-height:1.6;text-wrap:pretty}
|
|
34
|
+
.lp-actions{margin-top:clamp(20px,3.2cqh,32px);display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;justify-content:center}
|
|
35
|
+
.lp-btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:13px;font-weight:500;letter-spacing:.01em;
|
|
36
|
+
text-decoration:none;cursor:pointer;border:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,box-shadow .25s}
|
|
37
|
+
.lp-btn--primary{padding:13px 22px;border-radius:var(--lp-radius);background:var(--lp-accent);color:var(--lp-accent-fg)}
|
|
38
|
+
.lp-btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--lp-accent) 60%,transparent)}
|
|
39
|
+
.lp-btn--secondary{padding:13px 4px;background:none;color:var(--lp-fg);border-bottom:1px solid color-mix(in srgb,var(--lp-fg) 30%,transparent);border-radius:0}
|
|
40
|
+
.lp-btn--secondary:hover{border-bottom-color:var(--lp-fg)}
|
|
41
|
+
.lp-btn svg{width:14px;height:14px;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
|
|
42
|
+
.lp-btn:hover svg[data-dir=back]{transform:translateX(-3px)}
|
|
43
|
+
.lp-btn:hover svg[data-dir=arrow]{transform:translate(2px,-2px)}
|
|
44
|
+
.lp-btn:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
|
|
45
|
+
.lp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
|
46
|
+
|
|
47
|
+
.lp-layout-split{justify-content:space-between}
|
|
48
|
+
.lp-layout-split .lp-head{padding-top:clamp(8px,4cqh,48px)}
|
|
49
|
+
.lp-layout-split .lp-body{padding-bottom:clamp(8px,3cqh,40px)}
|
|
50
|
+
.lp-layout-bottom{justify-content:flex-end}
|
|
51
|
+
.lp-layout-top{justify-content:flex-start}
|
|
52
|
+
.lp-layout-bottom-left{justify-content:flex-end;align-items:flex-start}
|
|
53
|
+
.lp-layout-bottom-left .lp-head,.lp-layout-bottom-left .lp-body,
|
|
54
|
+
.lp-layout-left .lp-head,.lp-layout-left .lp-body{align-items:flex-start;text-align:left}
|
|
55
|
+
.lp-layout-bottom-left .lp-actions,.lp-layout-left .lp-actions{justify-content:flex-start}
|
|
56
|
+
.lp-layout-left{align-items:flex-start;padding-left:max(16px,calc(var(--lp-pad) * 1.4))}
|
|
57
|
+
.lp-layout-right{align-items:flex-end}
|
|
58
|
+
.lp-layout-right .lp-head,.lp-layout-right .lp-body{align-items:flex-end;text-align:right}
|
|
59
|
+
.lp-layout-right .lp-actions{justify-content:flex-end}
|
|
60
|
+
.lp-layout-none .lp-head,.lp-layout-none .lp-body{display:none}
|
|
61
|
+
.lp-code-hidden .lp-code{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
|
|
62
|
+
|
|
63
|
+
.lp-fadein .lp-head,.lp-fadein .lp-body{animation:lp-rise 1.1s cubic-bezier(.2,.8,.2,1) both}
|
|
64
|
+
.lp-fadein .lp-body{animation-delay:.18s}
|
|
65
|
+
@keyframes lp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
|
|
66
|
+
@container (max-width:640px){.lp-layout-left,.lp-layout-right{align-items:center}
|
|
67
|
+
.lp-layout-left .lp-head,.lp-layout-left .lp-body,.lp-layout-right .lp-head,.lp-layout-right .lp-body{align-items:center;text-align:center}
|
|
68
|
+
.lp-layout-left .lp-actions,.lp-layout-right .lp-actions{justify-content:center}}
|
|
69
|
+
@media (prefers-reduced-motion:reduce){.lp-fadein .lp-head,.lp-fadein .lp-body{animation:none}.lp-btn,.lp-btn svg{transition:none}}
|
|
70
|
+
`,V=new Set;function K(l,o){if(typeof document>"u"||V.has(l))return;if(document.querySelector(`style[data-lostpage="${l}"]`)){V.add(l);return}let i=document.createElement("style");i.setAttribute("data-lostpage",l),i.textContent=o,document.head.appendChild(i),V.add(l)}function Z(){K("base",le)}function ee(l,o){o&&K(`scene:${l}`,o.replace(/&/g,`.lp-s-${l}`))}function te(l,o,i={}){let s=null,a=!1,b=!1,c=i,m=typeof o=="object"?o:null,E=typeof l=="string"?_()?document.querySelector(l):null:l,L=()=>{a||!m||!E||(s?.destroy(),s=se(E,m,c),b&&s.pause())},P=(async()=>{if(!(!_()||!E)){if(!m){if(typeof o=="string")throw new Error(`[lostpage] "lostpage/core" can't load "${o}" by id. Import mount from "lostpage", or pass the scene object from "lostpage/scenes/${o}".`);m=await o()}L()}})();return P.catch(u=>console.error(u)),{get root(){return s?.root??null},ready:P,update(u){let C=c;if(c={...c,...u},!s)return;["preset","params","motion","interactive","seed","maxDpr","overlay"].some(r=>r in u&&JSON.stringify(u[r])!==JSON.stringify(C[r]))?L():s.refreshCopy(c)},pause(){b=!0,s?.pause()},resume(){b=!1,s?.resume()},destroy(){a=!0,s?.destroy(),s=null}}}function se(l,o,i){Z(),ee(o.id,o.css);let s=D(o,i),a=document.createElement("div");a.className=`lp-root lp-s-${o.id} lp-p-${s.preset}${o.codeInScene?" lp-code-hidden":""}${i.className?" "+i.className:""}`,a.setAttribute("data-lostpage",o.id),i.height&&a.style.setProperty("--lp-height",i.height);let b=e=>{for(let[t,n]of Object.entries(e))a.style.setProperty(t.startsWith("--")?t:`--lp-${t}`,n)};b(s.theme);let c=document.createElement("div");c.className="lp-stage",c.setAttribute("aria-hidden","true"),a.append(c);let m=null;i.overlay!==!1&&(m=T(s.copy,o.layout,i.onNavigate),a.append(m)),l.append(a);let L=window.matchMedia?.("(prefers-reduced-motion: reduce)"),P=i.motion==="reduce"||i.motion!=="full"&&!!L?.matches,u=i.interactive!==!1,C=i.maxDpr??2,f=o.motion==="static"||P&&o.motion!=="game",r={x:0,y:0,nx:0,ny:0,sx:0,sy:0,down:!1,inside:!1,engaged:!1},w=[],$=[],h=0,y=0,v=1,g=1,j=!0,I=!document.hidden,R=!1,p=0,S=0,q=0,H=!0,M={},z=!1,d={root:a,stage:c,overlay:m,params:s.params,copy:s.copy,preset:s.preset,get width(){return h},get height(){return y},get dpr(){return v*g},pointer:r,reducedMotion:P,interactive:u,random:Q(i.seed??1337),canvas(e={}){let t=document.createElement("canvas");t.style.zIndex=String(e.z??0),c.append(t);let n={el:t,scale:e.scale??1,adaptive:!!e.adaptive};return w.push(n),N(n),t},on(e,t,n){a.addEventListener(e,t,n),$.push(()=>a.removeEventListener(e,t,n))},onWindow(e,t,n){window.addEventListener(e,t,n),$.push(()=>window.removeEventListener(e,t,n))},invalidate(){H=!0,!p&&!z&&k()},visible:()=>j&&I,navigate(e,t){i.onNavigate?i.onNavigate(e,t??new MouseEvent("click")):location.assign(e)},cssVar:e=>getComputedStyle(a).getPropertyValue(e.startsWith("--")?e:`--lp-${e}`).trim()};function N(e){let t=v*e.scale*(e.adaptive?g:1),n=Math.max(1,Math.round(h*t)),x=Math.max(1,Math.round(y*t));(e.el.width!==n||e.el.height!==x)&&(e.el.width=n,e.el.height=x)}function re(){let e=a.getBoundingClientRect();h=Math.max(1,Math.round(e.width)),y=Math.max(1,Math.round(e.height)),v=Math.min(window.devicePixelRatio||1,C);for(let t of w)N(t);try{M.resize?.(h,y,v)}catch(t){B(t)}d.invalidate()}if(u){let e=t=>{let n=a.getBoundingClientRect();r.x=t.clientX-n.left,r.y=t.clientY-n.top,r.nx=F(r.x/n.width*2-1,-1,1),r.ny=F(1-r.y/n.height*2,-1,1),r.engaged=!0};d.on("pointermove",t=>{e(t),r.inside=!0,f&&d.invalidate()}),d.on("pointerdown",t=>{e(t),r.down=!0,f&&d.invalidate()}),d.onWindow("pointerup",()=>{r.down=!1}),d.on("pointerleave",()=>{r.inside=!1})}function ie(e){if(p=0,z)return;let t=S?Math.min((e-S)/1e3,1/20):1/60;S=e,r.sx=W(r.sx,r.nx,3,t),r.sy=W(r.sy,r.ny,3,t),f?(q=o.stillTime??4,r.sx=r.nx,r.sy=r.ny):q+=t;try{M.frame?.(q,f?0:t)}catch(n){B(n);return}f||ae(t),H=!1,f||k()}function k(){p||z||R||!(j&&I)||f&&!H||(p=requestAnimationFrame(ie))}let O=0,A=0,Y=1.5;function ae(e){if(!w.some(x=>x.adaptive))return;if(Y>0){Y-=e;return}if(O+=e,A++,O<1)return;let t=O/A;O=0,A=0;let n=g;if(t>1/45?n=Math.max(.5,g*.85):t<1/58&&g<1&&(n=Math.min(1,g*1.08)),Math.abs(n-g)>.01){g=n;for(let x of w)x.adaptive&&N(x);M.resize?.(h,y,v)}}function B(e){z=!0,p&&cancelAnimationFrame(p),p=0,a.classList.add("lp-fallback");for(let t of w)t.el.style.display="none";console.warn(`[lostpage] scene "${o.id}" could not render, showing text only.`,e)}let G=new IntersectionObserver(e=>{j=e[e.length-1].isIntersecting,j&&(S=0,k())});G.observe(a);let J=()=>{I=!document.hidden,I&&(S=0,k())};document.addEventListener("visibilitychange",J);let U=new ResizeObserver(()=>re());U.observe(a);let X=a.getBoundingClientRect();h=Math.max(1,Math.round(X.width)),y=Math.max(1,Math.round(X.height)),v=Math.min(window.devicePixelRatio||1,C);try{M=o.setup(d)||{},M.resize?.(h,y,v)}catch(e){B(e)}return k(),{root:a,pause(){R=!0,p&&cancelAnimationFrame(p),p=0},resume(){R=!1,S=0,k()},refreshCopy(e){let t=D(o,e);if(b(t.theme),m){let n=T(t.copy,o.layout,e.onNavigate);n.classList.remove("lp-fadein"),m.replaceWith(n),m=n,d.overlay=n}Object.assign(d.copy,t.copy)},destroy(){p&&cancelAnimationFrame(p),p=0,z=!0,G.disconnect(),U.disconnect(),document.removeEventListener("visibilitychange",J);for(let e of $)e();try{M.destroy?.()}catch{}for(let e of w)e.el.__lpgl?.getExtension("WEBGL_lose_context")?.loseContext();a.remove()}}}var oe={"ascii-3d":()=>import("./ascii-3d-LO5K5SPJ.js"),astronaut:()=>import("./astronaut-LH5N45GT.js"),aurora:()=>import("./aurora-XF7DCQ7M.js"),autumn:()=>import("./autumn-V5GRVYCX.js"),"balloon-404":()=>import("./balloon-404-KV6ISJWV.js"),beach:()=>import("./beach-OGS53KAQ.js"),"black-hole":()=>import("./black-hole-635WWF67.js"),"block-drop":()=>import("./block-drop-QU7NYBNQ.js"),"blue-screen":()=>import("./blue-screen-GKLGT7XD.js"),breakout:()=>import("./breakout-EGDE3QDC.js"),bricks:()=>import("./bricks-C6XPPQ64.js"),"broken-link":()=>import("./broken-link-U47D6LR2.js"),brutalist:()=>import("./brutalist-QFXIHFAD.js"),"bubble-wrap":()=>import("./bubble-wrap-45ZWIQMW.js"),campfire:()=>import("./campfire-TFG4DUUS.js"),card:()=>import("./card-GH5VVMRG.js"),cassette:()=>import("./cassette-33OUQ4CF.js"),chalkboard:()=>import("./chalkboard-NAPUHNER.js"),"chrome-404":()=>import("./chrome-404-QVPFIQEF.js"),"circuit-board":()=>import("./circuit-board-V6VT4OTX.js"),"claw-machine":()=>import("./claw-machine-LLCPLZ6W.js"),"clay-404":()=>import("./clay-404-SMDVAQCV.js"),constellation:()=>import("./constellation-J5QMY7IB.js"),countdown:()=>import("./countdown-2TEFVO73.js"),"cross-stitch":()=>import("./cross-stitch-N5H5GLAG.js"),"deep-sea":()=>import("./deep-sea-ILDVMW5M.js"),divider:()=>import("./divider-PMT4UZEF.js"),dna:()=>import("./dna-CAAKBMRK.js"),dominoes:()=>import("./dominoes-VLA5MBXM.js"),"dot-grid":()=>import("./dot-grid-O7LJO44U.js"),editorial:()=>import("./editorial-4C5Z33WO.js"),elevator:()=>import("./elevator-EFNB6FVO.js"),emoji:()=>import("./emoji-EHAJDQSM.js"),"error-cascade":()=>import("./error-cascade-CIJCQLP3.js"),"evidence-board":()=>import("./evidence-board-Z7DXMGNE.js"),eyes:()=>import("./eyes-VPOHW2CX.js"),fireworks:()=>import("./fireworks-QLWJ3S43.js"),flashlight:()=>import("./flashlight-QXI7QT74.js"),flatline:()=>import("./flatline-3GBK7IVS.js"),flock:()=>import("./flock-RLSZ7EZQ.js"),"foggy-glass":()=>import("./foggy-glass-A56REA7E.js"),gears:()=>import("./gears-4HJO7H74.js"),"glass-404":()=>import("./glass-404-WZRMDFTP.js"),glitch:()=>import("./glitch-Y4CIADF3.js"),"gradient-404":()=>import("./gradient-404-YNSTOPNA.js"),halftone:()=>import("./halftone-XZ7F75B4.js"),"hanging-letters":()=>import("./hanging-letters-Y3VH7EVP.js"),"hanging-sign":()=>import("./hanging-sign-2KUXPLZE.js"),"helpful-links":()=>import("./helpful-links-UFGTWTRQ.js"),hyperspace:()=>import("./hyperspace-R34QNI7J.js"),hypnosis:()=>import("./hypnosis-MK6AV3SC.js"),ink:()=>import("./ink-S332BOPS.js"),invaders:()=>import("./invaders-ZSY3Z443.js"),kaleidoscope:()=>import("./kaleidoscope-BLGSIK4F.js"),"lava-lamp":()=>import("./lava-lamp-VYY5XFG5.js"),life:()=>import("./life-QBWZL5FY.js"),lighthouse:()=>import("./lighthouse-QX7QIIPX.js"),loading:()=>import("./loading-LIS67QF7.js"),"lost-at-sea":()=>import("./lost-at-sea-QNURIHBY.js"),"magic-8-ball":()=>import("./magic-8-ball-W3TRJALZ.js"),"matrix-rain":()=>import("./matrix-rain-4V4SVGGG.js"),maze:()=>import("./maze-QL5TRCE5.js"),"mesh-gradient":()=>import("./mesh-gradient-UISGI62K.js"),"metro-map":()=>import("./metro-map-H64EHOZM.js"),"milk-carton":()=>import("./milk-carton-3SDLA5AY.js"),minimal:()=>import("./minimal-SB6FU3DE.js"),mirage:()=>import("./mirage-IQ3IA3VB.js"),"moon-landing":()=>import("./moon-landing-TKZE4Q6G.js"),"neon-sign":()=>import("./neon-sign-XGMN75MH.js"),newspaper:()=>import("./newspaper-YECAUY77.js"),nixie:()=>import("./nixie-CQBRCVDE.js"),"no-signal":()=>import("./no-signal-HL4A4CFZ.js"),"one-bit":()=>import("./one-bit-AFIZQPHK.js"),"outline-404":()=>import("./outline-404-REB5E5EN.js"),"paint-splash":()=>import("./paint-splash-GZGPOURW.js"),"paper-plane":()=>import("./paper-plane-KDCSE3RM.js"),particles:()=>import("./particles-7UMRMT2M.js"),"path-not-found":()=>import("./path-not-found-VUEXOVO7.js"),planet:()=>import("./planet-H6QGPDVC.js"),pond:()=>import("./pond-6DL43VUQ.js"),pong:()=>import("./pong-B2ZGAY7T.js"),radar:()=>import("./radar-22JCPGQZ.js"),"rainy-window":()=>import("./rainy-window-DTGLJVAR.js"),receipt:()=>import("./receipt-ZOYUSMN3.js"),"road-closed":()=>import("./road-closed-3OS55UBX.js"),"rpg-dialog":()=>import("./rpg-dialog-FV53YYNJ.js"),runner:()=>import("./runner-NANXJTQG.js"),"scratch-card":()=>import("./scratch-card-GC6U4ZZN.js"),screensaver:()=>import("./screensaver-UXKJVQUU.js"),"search-404":()=>import("./search-404-HFKZ4DUA.js"),"server-default":()=>import("./server-default-RBMMRAHS.js"),"server-room":()=>import("./server-room-QSKAUFUY.js"),skyline:()=>import("./skyline-OMZMF5R6.js"),skywriting:()=>import("./skywriting-RYNQWJ6I.js"),"slot-machine":()=>import("./slot-machine-XXCVI2HK.js"),snake:()=>import("./snake-6Z5V3QA3.js"),"snow-globe":()=>import("./snow-globe-RLDPNA2J.js"),"soft-blobs":()=>import("./soft-blobs-FYEFGINV.js"),"solar-system":()=>import("./solar-system-CQAP6WFU.js"),"split-flap":()=>import("./split-flap-O7JGD5Q4.js"),"split-panel":()=>import("./split-panel-QGXZ24E4.js"),stage:()=>import("./stage-GBZR3JQS.js"),"swiss-poster":()=>import("./swiss-poster-OON4HBUG.js"),terminal:()=>import("./terminal-7BTUDZDB.js"),thunderstorm:()=>import("./thunderstorm-FRCKHKXY.js"),topographic:()=>import("./topographic-3RIQXKIQ.js"),"torn-page":()=>import("./torn-page-6UT5ZQHG.js"),"treasure-map":()=>import("./treasure-map-FALAEBL5.js"),typewriter:()=>import("./typewriter-7TIO42MH.js"),ufo:()=>import("./ufo-6UW34TI3.js"),unplugged:()=>import("./unplugged-QXKDDH4S.js"),"vending-machine":()=>import("./vending-machine-SH3MNFMY.js"),vinyl:()=>import("./vinyl-3FUP3LSO.js"),"voxel-404":()=>import("./voxel-404-LMC43X4B.js"),wormhole:()=>import("./wormhole-I2RWIMRW.js"),"zen-garden":()=>import("./zen-garden-HMAMASJK.js")},ne=["ascii-3d","astronaut","aurora","autumn","balloon-404","beach","black-hole","block-drop","blue-screen","breakout","bricks","broken-link","brutalist","bubble-wrap","campfire","card","cassette","chalkboard","chrome-404","circuit-board","claw-machine","clay-404","constellation","countdown","cross-stitch","deep-sea","divider","dna","dominoes","dot-grid","editorial","elevator","emoji","error-cascade","evidence-board","eyes","fireworks","flashlight","flatline","flock","foggy-glass","gears","glass-404","glitch","gradient-404","halftone","hanging-letters","hanging-sign","helpful-links","hyperspace","hypnosis","ink","invaders","kaleidoscope","lava-lamp","life","lighthouse","loading","lost-at-sea","magic-8-ball","matrix-rain","maze","mesh-gradient","metro-map","milk-carton","minimal","mirage","moon-landing","neon-sign","newspaper","nixie","no-signal","one-bit","outline-404","paint-splash","paper-plane","particles","path-not-found","planet","pond","pong","radar","rainy-window","receipt","road-closed","rpg-dialog","runner","scratch-card","screensaver","search-404","server-default","server-room","skyline","skywriting","slot-machine","snake","snow-globe","soft-blobs","solar-system","split-flap","split-panel","stage","swiss-poster","terminal","thunderstorm","topographic","torn-page","treasure-map","typewriter","ufo","unplugged","vending-machine","vinyl","voxel-404","wormhole","zen-garden"];async function pe(l){let o=oe[l];if(!o)throw new Error(`[lostpage] unknown scene "${l}". Available: ${ne.join(", ")}`);return(await o()).default}function Ee(l,o,i){return te(l,typeof o=="string"?()=>pe(o):o,i)}export{ne as a,pe as b,Ee as c};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S}from"./chunk-4ZBXB36L.js";import{f as b}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var k={id:"circuit-board",name:"Circuit Board",description:"Signals race along the copper traces of a circuit board toward the chip that serves this page. That chip is scorched and smoking.",category:"Retro Tech",kind:"2d",motion:"live",tags:["canvas","pcb","electronics","tech","hardware","green","signals"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Hardware fault",title:"Short circuit.",message:"The signal reached the chip that holds this page, and the chip didn't answer. Route around it.",actions:[{label:"Reroute to home",href:"/",variant:"primary"}]},params:{board:"#0d3b22",trace:"#c9a35a",pulse:"#9dffcf",chip:"#141414",burnt:"#3a1a08"},theme:{bg:"#0a2a18",fg:"#e6ffef",accent:"#9dffcf","accent-fg":"#0a2a18"},presetName:"FR4 Green",presets:{blue:{name:"Blue Board",params:{board:"#0b2a5a",trace:"#d9dce6",pulse:"#7fd3ff"},theme:{bg:"#08203f",accent:"#7fd3ff","accent-fg":"#08203f"}},black:{name:"Matte Black",params:{board:"#121214",trace:"#d4af37",pulse:"#ffd36b"},theme:{bg:"#0b0b0c",accent:"#ffd36b","accent-fg":"#0b0b0c"}},purple:{name:"Purple",params:{board:"#2a0f4a",trace:"#e6c86b",pulse:"#ff7ae0"},theme:{bg:"#200b3a",accent:"#ff7ae0","accent-fg":"#200b3a"}}},setup(p){let d=p.params,s=S(p),y=p.random,u=[],w=[],t={x:0,y:0,w:0,h:0},g=[],x=()=>{t={w:Math.min(s.w*.18,200),h:Math.min(s.w*.18,200)*.8,x:0,y:0},t.x=s.w/2-t.w/2,t.y=s.h*.32-t.h/2,u=[];let l=16,n=e=>Math.round(e/l)*l;for(let e=0;e<34;e++){let a=e%4,r=(Math.floor(e/4)+.5)/9,o=a===0?t.x+t.w*r:a===1?t.x+t.w:a===2?t.x+t.w*r:t.x,c=a===0?t.y:a===1?t.y+t.h*r:a===2?t.y+t.h:t.y+t.h*r,h=[[o,c]],f=a===0?[0,-1]:a===1?[1,0]:a===2?[0,1]:[-1,0],i=30+y()*60;o+=f[0]*i,c+=f[1]*i,h.push([n(o),n(c)]);let m=y()<.5?1:-1;i=40+y()*140,o+=(f[0]||m)*i,c+=(f[1]||m)*i,h.push([n(o),n(c)]),i=60+y()*s.w*.3,o+=f[0]*i,c+=f[1]*i,h.push([n(o),n(c)]),u.push(h)}w=u.map(e=>e.slice(1).reduce((a,r,o)=>a+Math.hypot(r[0]-e[o][0],r[1]-e[o][1]),0))};x();let M=(l,n)=>{for(let e=1;e<l.length;e++){let a=Math.hypot(l[e][0]-l[e-1][0],l[e][1]-l[e-1][1]);if(n<=a)return[l[e-1][0]+(l[e][0]-l[e-1][0])*n/a,l[e-1][1]+(l[e][1]-l[e-1][1])*n/a];n-=a}return l[l.length-1]};return{resize(){s.reset(),x()},frame(l,n){let e=s.g;s.reset(),e.fillStyle=d.board,e.fillRect(0,0,s.w,s.h),e.fillStyle=b("#ffffff",.02);for(let r=0;r<s.h;r+=4)e.fillRect(0,r,s.w,1);e.strokeStyle=b(d.trace,.75),e.lineWidth=3,e.lineJoin="round";for(let r of u){e.beginPath(),r.forEach(([h,f],i)=>i?e.lineTo(h,f):e.moveTo(h,f)),e.stroke();let[o,c]=r[r.length-1];e.fillStyle=d.trace,e.beginPath(),e.arc(o,c,6,0,Math.PI*2),e.fill(),e.fillStyle=d.board,e.beginPath(),e.arc(o,c,2.5,0,Math.PI*2),e.fill()}e.globalCompositeOperation="lighter",u.forEach((r,o)=>{let c=w[o],h=c-((l*160+o*97)%(c+200)-100);if(h<0||h>c)return;let[f,i]=M(r,h),m=e.createRadialGradient(f,i,0,f,i,14);m.addColorStop(0,b(d.pulse,.9)),m.addColorStop(1,b(d.pulse,0)),e.fillStyle=m,e.fillRect(f-14,i-14,28,28)}),e.globalCompositeOperation="source-over",e.fillStyle="#888";for(let r=0;r<9;r++){let o=(r+.5)/9;e.fillRect(t.x+t.w*o-3,t.y-8,6,8),e.fillRect(t.x+t.w*o-3,t.y+t.h,6,8),e.fillRect(t.x-8,t.y+t.h*o-3,8,6),e.fillRect(t.x+t.w,t.y+t.h*o-3,8,6)}e.fillStyle=d.chip,e.fillRect(t.x,t.y,t.w,t.h);let a=e.createRadialGradient(t.x+t.w*.55,t.y+t.h*.45,0,t.x+t.w*.55,t.y+t.h*.45,t.w*.7);a.addColorStop(0,b(d.burnt,1)),a.addColorStop(.3,b("#6b2a0a",.8)),a.addColorStop(1,b(d.burnt,0)),e.fillStyle=a,e.fillRect(t.x-20,t.y-20,t.w+40,t.h+40),e.fillStyle="rgba(255,255,255,.65)",e.font=`700 ${t.h*.16}px ui-monospace,Menlo,monospace`,e.textAlign="center",e.fillText(`PG-${p.copy.code}`,t.x+t.w/2,t.y+t.h*.32),e.font=`600 ${t.h*.09}px ui-monospace,Menlo,monospace`,e.fillText("NOT FOUND",t.x+t.w/2,t.y+t.h*.85),Math.sin(l*13)>.6&&(e.fillStyle="rgba(255,140,40,.9)",e.fillRect(t.x+t.w*.5+Math.sin(l*7)*10,t.y+t.h*.5,3,3)),n>0&&Math.random()<n*5&&g.push({x:t.x+t.w*(.4+Math.random()*.3),y:t.y+t.h*.4,r:8,life:1});for(let r of g)r.y-=26*n,r.r+=16*n,r.life-=n*.4,e.fillStyle=`rgba(200,200,200,${Math.max(0,r.life*.18)})`,e.beginPath(),e.arc(r.x,r.y,r.r,0,Math.PI*2),e.fill();g=g.filter(r=>r.life>0)}}}};export{k as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as M,d as S,g as P}from"./chunk-JLRXT2AZ.js";import{a as w}from"./chunk-4ZBXB36L.js";import{f as y}from"./chunk-HXSSPN2I.js";import{a as u}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var A={id:"claw-machine",name:"Claw Machine",description:"An arcade claw machine full of plush toys, with the 404 plush right at the front. Move with \u2190 \u2192, drop with space. The claw is, of course, rigged.",category:"Games",kind:"2d",motion:"game",tags:["canvas","game","playable","arcade","claw","funny","keyboard"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"\u2190 \u2192 move \xB7 space drops",title:"So close. It slipped away again.",message:"The 404 plush is always just out of reach. The prize counter (the homepage) is open.",actions:[{label:"Go to the prize counter",href:"/",variant:"primary"}]},params:{cabinet:"#ff3b7f",glass:"#1a0b2e",plush:["#ffd23f","#7bdff2","#b2f7ef","#f7d6e0","#cdb4db"],claw:"#d9d9de"},theme:{bg:"#120720",fg:"#ffe9f3",accent:"#ff3b7f","accent-fg":"#fff","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Arcade Pink",presets:{blue:{name:"Midnight Claw",params:{cabinet:"#2b59ff",glass:"#050a24",plush:["#ffd23f","#ff6b9a","#7bdff2","#ffffff"]},theme:{bg:"#050a24",accent:"#2b59ff","accent-fg":"#fff"}},mint:{name:"Mint Machine",params:{cabinet:"#2ec4b6",glass:"#04201d",plush:["#ffbf69","#ff9f1c","#cbf3f0","#ffffff"]},theme:{bg:"#031a17",accent:"#2ec4b6","accent-fg":"#031a17"}},gold:{name:"Gold Rush",params:{cabinet:"#d4a017",glass:"#1a1205",plush:["#ff6b6b","#4ecdc4","#ffe66d","#f7fff7"]},theme:{bg:"#120c02",accent:"#d4a017","accent-fg":"#120c02"}}},css:P,setup(h){let i=h.params,n=w(h),r=M(h,{pointerPlays:!1}),g=h.random,t={x:0,y:0,w:0,h:0},o=[],l={x:0,y:0,open:1,state:"idle",t:0,holding:-1},b=2,m=()=>{let c=Math.min(n.w*.62,640),f=Math.min(n.h*.56,c*.8);t={x:(n.w-c)/2,y:n.h*.04,w:c,h:f},o=[];for(let e=0;e<26;e++){let d=18+g()*14;o.push({x:t.x+d+g()*(t.w-d*2),y:t.y+t.h-d-g()*t.h*.25,r:d,col:i.plush[e%i.plush.length],code:!1,vy:0,held:!1})}o.push({x:t.x+t.w*.62,y:t.y+t.h-52,r:44,col:"#ffffff",code:!0,vy:0,held:!1}),l={x:t.x+t.w*.2,y:t.y+20,open:1,state:"idle",t:0,holding:-1}};m();let x=()=>{l.state==="idle"&&(l.state="down")};return{resize(){n.reset(),m()},frame(c,f){let e=n.g;if(n.reset(),f>0&&(!h.reducedMotion||r.playing)){if(l.state==="idle"){if(r.playing)r.left&&(l.x-=220*f),r.right&&(l.x+=220*f),(r.pressed()||r.action)&&x();else{let a=o[o.length-1].x;l.x+=Math.sign(a-l.x)*Math.min(Math.abs(a-l.x),160*f),Math.abs(a-l.x)<2&&c>b&&x()}l.x=Math.max(t.x+30,Math.min(t.x+t.w-30,l.x))}else if(l.state==="down"){l.y+=260*f;let a=o.find(s=>Math.abs(s.x-l.x)<s.r&&l.y+30>s.y-s.r);(a||l.y>t.y+t.h-40)&&(l.state="grab",l.t=0,a&&(l.holding=o.indexOf(a)))}else if(l.state==="grab")l.t+=f,l.open=Math.max(.15,1-l.t*2),l.t>.6&&(l.state="up");else if(l.state==="up"){l.y-=160*f;let a=o[l.holding];a&&(a.x=l.x,a.y=l.y+40+a.r*.5,a.held=!0,l.y<t.y+t.h*.45&&(a.held=!1,l.holding=-1,l.open=.7)),l.y<=t.y+20&&(l.y=t.y+20,l.state="return")}else l.state==="return"&&(l.open=Math.min(1,l.open+f),l.open>=1&&(l.state="idle",b=c+3));for(let a of o){if(a.held)continue;a.vy+=900*f,a.y+=a.vy*f;let s=t.y+t.h-a.r;a.y>s&&(a.y=s,a.vy=0)}}e.fillStyle=i.glass,e.fillRect(0,0,n.w,n.h);let p=e.createLinearGradient(t.x-30,0,t.x+t.w+30,0);p.addColorStop(0,y(i.cabinet,.7)),p.addColorStop(.5,i.cabinet),p.addColorStop(1,y(i.cabinet,.7)),e.fillStyle=p,e.beginPath(),e.roundRect(t.x-26,t.y-10,t.w+52,t.h+70,24),e.fill(),e.fillStyle=i.glass,e.fillRect(t.x,t.y,t.w,t.h),e.fillStyle=y("#ffffff",.05),e.fillRect(t.x,t.y,t.w,t.h),e.fillStyle="#000",e.fillRect(t.x+10,t.y+t.h-70,70,70),e.fillStyle=y(i.cabinet,.8),e.font="700 10px ui-monospace,Menlo,monospace",e.textAlign="center",e.fillText("PRIZE",t.x+45,t.y+t.h-30);for(let a of o)e.fillStyle=a.col,e.beginPath(),e.arc(a.x,a.y,a.r,0,Math.PI*2),e.fill(),e.beginPath(),e.arc(a.x-a.r*.6,a.y-a.r*.75,a.r*.32,0,Math.PI*2),e.arc(a.x+a.r*.6,a.y-a.r*.75,a.r*.32,0,Math.PI*2),e.fill(),e.fillStyle="#1a1a1a",e.beginPath(),e.arc(a.x-a.r*.3,a.y-a.r*.1,a.r*.08,0,Math.PI*2),e.arc(a.x+a.r*.3,a.y-a.r*.1,a.r*.08,0,Math.PI*2),e.fill(),a.code&&(e.fillStyle=i.cabinet,e.font=`900 ${a.r*.5}px ${u}`,e.textAlign="center",e.textBaseline="middle",e.fillText(h.copy.code,a.x,a.y+a.r*.35),e.textBaseline="alphabetic");e.strokeStyle=i.claw,e.lineWidth=2,e.beginPath(),e.moveTo(l.x,t.y),e.lineTo(l.x,l.y),e.stroke(),e.fillStyle=i.claw,e.fillRect(l.x-16,l.y-6,32,14),e.lineWidth=5,e.lineCap="round";for(let a of[-1,1]){let s=10+l.open*18;e.beginPath(),e.moveTo(l.x+a*10,l.y+6),e.lineTo(l.x+a*s,l.y+28),e.lineTo(l.x+a*(s-10),l.y+42),e.stroke()}e.fillStyle=y("#ffffff",.06),e.beginPath(),e.moveTo(t.x+t.w*.15,t.y),e.lineTo(t.x+t.w*.32,t.y),e.lineTo(t.x+t.w*.12,t.y+t.h),e.lineTo(t.x-0,t.y+t.h),e.fill();let v=Math.max(10,Math.min(13,n.w/100));!r.playing&&Math.floor(c*1.6)%2===0&&S(e,"DEMO \xB7 PRESS \u2190 \u2192 OR SPACE",n.w/2,t.y+t.h+30,v,"#fff","center")}}}};export{A as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as t}from"./chunk-NUQBEDA4.js";import"./chunk-QJZBGT2Q.js";import"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var c={id:"clay-404",name:"Soft Clay",description:"Chunky pastel clay numerals with soft studio shadows, the friendly 3D look made popular by Spline.",category:"Typography",kind:"3d",motion:"live",tags:["webgl","raymarching","clay","pastel","spline","soft","light","friendly"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Oops",title:"This page got squished.",message:"We rolled it, shaped it and baked it, but it still doesn't exist.",actions:[{label:"Go home",href:"/",variant:"primary",icon:"home"}]},params:{c1:"#ff8fa3",c2:"#ffd166",c3:"#7bdff2",bgTop:"#fbf3ea",bgBottom:"#f2e2d2",gloss:.35,light:"#fff6ec"},theme:{bg:"#f7ebdf",fg:"#2b1d16",accent:"#2b1d16","accent-fg":"#fff7ef","font-display":'"Bricolage Grotesque","Nunito",ui-rounded,ui-sans-serif,system-ui,sans-serif'},presetName:"Sorbet",presets:{ocean:{name:"Seaside",params:{c1:"#4ea8de",c2:"#56cfe1",c3:"#ffd6a5",bgTop:"#eef8ff",bgBottom:"#d4ecfb"},theme:{bg:"#e1f2fd",fg:"#0d2a40",accent:"#0d2a40","accent-fg":"#eef8ff"}},citrus:{name:"Citrus",title:"Squeezed out of existence.",params:{c1:"#ff9f1c",c2:"#c5e063",c3:"#ffdd4a",bgTop:"#fffbea",bgBottom:"#fbefc4"},theme:{bg:"#fdf4d5",fg:"#3a2a05",accent:"#3a2a05","accent-fg":"#fffbea"}},berry:{name:"Berry",params:{c1:"#c0266d",c2:"#7b2cbf",c3:"#ff6f91",bgTop:"#fff0f6",bgBottom:"#f6d5e5"},theme:{bg:"#fbe4ee",fg:"#3a0a22",accent:"#3a0a22","accent-fg":"#fff0f6"}},chocolate:{name:"Chocolate",title:"Melted away.",params:{c1:"#7b4a2e",c2:"#a0673f",c3:"#f2d4b8",bgTop:"#f7ece3",bgBottom:"#e8d2bf",gloss:.6},theme:{bg:"#efdfd0",fg:"#2e1708",accent:"#2e1708","accent-fg":"#f7ece3"}},garden:{name:"Night Garden",params:{c1:"#7bd389",c2:"#f7b2bd",c3:"#ffe8a3",bgTop:"#1d2a24",bgBottom:"#0f1814",light:"#f2fff6",gloss:.45},theme:{bg:"#16211c",fg:"#eefaf2",accent:"#7bd389","accent-fg":"#0f1814"}},mint:{name:"Mint",params:{c1:"#7fd8be",c2:"#a1fcdf",c3:"#fcd29f",bgTop:"#eefaf5",bgBottom:"#d7efe6"},theme:{bg:"#e2f4ec",fg:"#123227",accent:"#123227","accent-fg":"#effaf5"}},lilac:{name:"Lilac",params:{c1:"#b8a1ff",c2:"#ffb3e6",c3:"#a1c4ff",bgTop:"#f5f1ff",bgBottom:"#e4dcfa"},theme:{bg:"#ece6fd",fg:"#221a3d",accent:"#221a3d","accent-fg":"#f5f1ff"}},terracotta:{name:"Terracotta",title:"Fired in the kiln. Gone.",params:{c1:"#d9764f",c2:"#e9a15c",c3:"#b85a3e",bgTop:"#f6e9dc",bgBottom:"#e9d3bf",gloss:.15},theme:{bg:"#efdcca",fg:"#3a1c10",accent:"#3a1c10","accent-fg":"#fbefe4"}},midnight:{name:"Midnight",params:{c1:"#6c7cff",c2:"#ff6c9e",c3:"#ffd36c",bgTop:"#232742",bgBottom:"#151829",light:"#e9ecff",gloss:.5},theme:{bg:"#1b1f35",fg:"#eef0ff",accent:"#ffd36c","accent-fg":"#1b1f35"}},mono:{name:"Plaster",params:{c1:"#f4f1ec",c2:"#f4f1ec",c3:"#f4f1ec",bgTop:"#e9e5df",bgBottom:"#d8d2ca",gloss:.1},theme:{bg:"#e2ddd6",fg:"#1f1c18",accent:"#1f1c18","accent-fg":"#f4f1ec"}}},css:"& .lp-title{font-weight:700;letter-spacing:-.03em}",setup(f){let e=f.params;return t(f,{material:"clay",colors:{a:e.c1,b:e.c2,c:e.c3,bg0:e.bgTop,bg1:e.bgBottom,light:e.light},depth:.3,round:.16,spin:.22,float:.05,gloss:e.gloss,weight:900,floor:!0,y:.1})}};export{c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S}from"./chunk-4ZBXB36L.js";import{f as m}from"./chunk-HXSSPN2I.js";import{a as w,f as x}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var v={id:"constellation",name:"Constellation",description:"Star by star, the lines join up into a new constellation in the shape of the error. Hover a star to light it.",category:"Space",kind:"2d",motion:"live",tags:["canvas","stars","astronomy","night","calm","elegant","interactive"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Constellatio Paginae Amissae",title:"Written in the stars: not found.",message:"Ancient astronomers mapped this one too. They called it The Missing Page.",actions:[{label:"Navigate home by the stars",href:"/",variant:"primary"}]},params:{bg:"#050a1a",bg2:"#0d1838",star:"#ffffff",line:"#9fb8ff",label:"#d9b25f",chart:!1},theme:{bg:"#050a1a",fg:"#e9eeff",accent:"#e9eeff","accent-fg":"#050a1a","font-display":"var(--lp-font-serif)","title-weight":"400"},presetName:"Night Sky",presets:{aurora:{name:"Aurora Sky",params:{bg:"#03101a",bg2:"#0b3a3a",star:"#e6fff6",line:"#6bffc4",label:"#6bffc4"},theme:{bg:"#03101a",accent:"#6bffc4","accent-fg":"#03101a"}},chart:{name:"Star Chart",params:{bg:"#0d1f3a",bg2:"#0d1f3a",star:"#f3e6c8",line:"#d9b25f",label:"#d9b25f",chart:!0},theme:{bg:"#0d1f3a",fg:"#f3e6c8",accent:"#d9b25f","accent-fg":"#0d1f3a"}},dawn:{name:"Before Dawn",params:{bg:"#1a1440",bg2:"#d9787a",star:"#fff6e8",line:"#ffe2c2",label:"#fff6e8"},theme:{bg:"#3a2050",fg:"#fff6e8",accent:"#fff6e8","accent-fg":"#3a2050"}}},setup(h){let i=h.params,n=S(h),g=h.random,y=[],o=[],f=[],p=()=>{y=Array.from({length:Math.round(n.w*n.h/2600)},()=>({x:g()*n.w,y:g()*n.h,m:g()**3,tw:g()*10}));let c=Math.min(n.w*.8,1e3),t=Math.min(c*.4,n.h*.42),b=x(h.copy.code||"404",{width:c,height:t,font:w,weight:300,fit:.95,step:Math.max(4,Math.round(c/160)),random:g}),l=[];for(let a=0;a<b.length;a+=2)l.push({x:b[a]+(n.w-c)/2,y:b[a+1]+n.h*.36-t/2});o=[];let e=c/22;for(let a of l.sort(()=>g()-.5))o.every(s=>Math.hypot(s.x-a.x,s.y-a.y)>e)&&o.push({...a,m:.5+g()*.5});f=[];let r=new Set([0]);for(;r.size<o.length;){let a=[-1,-1,1/0];for(let s of r)for(let d=0;d<o.length;d++){if(r.has(d))continue;let u=Math.hypot(o[s].x-o[d].x,o[s].y-o[d].y);u<a[2]&&(a=[s,d,u])}r.add(a[1]),a[2]<e*2.1&&f.push([a[0],a[1]])}};return p(),{resize(){n.reset(),p()},frame(c){let t=n.g;n.reset();let b=t.createLinearGradient(0,0,0,n.h);if(b.addColorStop(0,i.bg),b.addColorStop(1,i.bg2),t.fillStyle=b,t.fillRect(0,0,n.w,n.h),i.chart){t.strokeStyle=m(i.line,.12),t.lineWidth=1;for(let e=1;e<8;e++)t.beginPath(),t.arc(n.w/2,n.h*1.4,n.h*1.4*e/6,Math.PI,0),t.stroke();for(let e=-6;e<=6;e++)t.beginPath(),t.moveTo(n.w/2,n.h*1.4),t.lineTo(n.w/2+e*n.w*.18,-10),t.stroke()}for(let e of y){let r=.25+e.m*.75*(.7+.3*Math.sin(c*(1+e.tw*.2)+e.tw));t.fillStyle=m(i.star,r);let a=.5+e.m*1.4;t.fillRect(e.x-a/2,e.y-a/2,a,a)}let l=h.reducedMotion?f.length:Math.min(f.length,(c-.6)*f.length*.32);t.strokeStyle=m(i.line,.55),t.lineWidth=1.2;for(let e=0;e<Math.floor(l);e++){let[r,a]=f[e];t.beginPath(),t.moveTo(o[r].x,o[r].y),t.lineTo(o[a].x,o[a].y),t.stroke()}if(l<f.length&&l>0){let[e,r]=f[Math.floor(l)],a=l%1;t.beginPath(),t.moveTo(o[e].x,o[e].y),t.lineTo(o[e].x+(o[r].x-o[e].x)*a,o[e].y+(o[r].y-o[e].y)*a),t.stroke()}for(let e of o){let r=h.pointer.inside?Math.max(0,1-Math.hypot(e.x-h.pointer.x,e.y-h.pointer.y)/80):0,a=1.6+e.m*2.2+r*3,s=t.createRadialGradient(e.x,e.y,0,e.x,e.y,a*5);s.addColorStop(0,m(i.star,.9)),s.addColorStop(.2,m(i.star,.35+r*.4)),s.addColorStop(1,m(i.star,0)),t.fillStyle=s,t.fillRect(e.x-a*5,e.y-a*5,a*10,a*10),t.fillStyle=i.star,t.beginPath(),t.arc(e.x,e.y,a*.6,0,Math.PI*2),t.fill()}l>=f.length&&(t.fillStyle=m(i.label,.8),t.font="italic 15px Georgia,serif",t.textAlign="center",t.fillText("\u2014 Pagina Amissa \u2014",n.w/2,n.h*.36+Math.min(n.w*.8,1e3)*.22+10))}}}};export{v as default};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import{a as n,d as p,e as f}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var x={id:"countdown",name:"Countdown",description:"\u201CTaking you home in 10 seconds.\u201D A progress ring counts down; set redirect to true and it follows your first button when it hits zero.",category:"Simple",kind:"2d",motion:"live",tags:["simple","redirect","timer","countdown","useful","fast"],layout:"none",copy:{title:"This page doesn\u2019t exist",message:"We\u2019ll take you back to the homepage in a moment.",actions:[{label:"Go now",href:"/",icon:"arrow"}]},params:{seconds:10,redirect:!1,ring:"#2563eb"},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#2563eb","accent-fg":"#ffffff",radius:"10px"},stillTime:3,presetName:"Light",presets:{dark:{name:"Dark",params:{ring:"#34d399"},theme:{bg:"#06110d",fg:"#ecfdf5",accent:"#34d399","accent-fg":"#06110d"}},quick:{name:"Quick (5s)",params:{seconds:5,ring:"#f97316"},theme:{bg:"#fff7ed",fg:"#431407",accent:"#f97316","accent-fg":"#fff"}}},css:`
|
|
2
|
+
& .cd{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px}
|
|
3
|
+
& .cd .ring{position:relative;width:clamp(110px,16cqw,150px);aspect-ratio:1;margin-bottom:28px}
|
|
4
|
+
& .cd svg{width:100%;height:100%;transform:rotate(-90deg)}
|
|
5
|
+
& .cd circle{fill:none;stroke-width:6}
|
|
6
|
+
& .cd .tr{stroke:color-mix(in srgb,var(--lp-fg) 10%,transparent)}
|
|
7
|
+
& .cd .pg{stroke:var(--ring);stroke-linecap:round}
|
|
8
|
+
& .cd .n{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(34px,5cqw,48px);font-weight:700;font-variant-numeric:tabular-nums}
|
|
9
|
+
& .cd .code{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--lp-muted)}
|
|
10
|
+
& .cd h1{margin:8px 0 0;font-size:clamp(26px,4cqw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
|
|
11
|
+
& .cd p{margin:12px 0 0;color:var(--lp-muted);font-size:15px}
|
|
12
|
+
& .cd a{margin-top:24px;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--lp-radius);background:var(--lp-accent);color:var(--lp-accent-fg);text-decoration:none;font-weight:600;font-size:14px}
|
|
13
|
+
`,setup(e){let a=e.params,r=e.copy,i=r.actions[0]??{label:"Go home",href:"/"},s=44,l=2*Math.PI*s,o=p(e,"cd",`<div class="ring" aria-hidden="true"><svg viewBox="0 0 100 100"><circle class="tr" cx="50" cy="50" r="${s}"/><circle class="pg" cx="50" cy="50" r="${s}" stroke-dasharray="${l}"/></svg><span class="n"></span></div>
|
|
14
|
+
<span class="code">ERROR ${n(r.code)}</span><h1>${f(r.code)}${n(r.title)}</h1><p>${n(r.message)}</p><a href="${n(i.href??"/")}">${n(i.label)} \u2192</a>`,{ring:a.ring}),g=o.querySelector(".pg"),m=o.querySelector(".n");o.querySelector("a").addEventListener("click",t=>{t.metaKey||t.ctrlKey||(t.preventDefault(),e.navigate(i.href??"/",t))});let d=!1;return{frame(t){let c=Math.max(0,a.seconds-t);m.textContent=String(Math.ceil(c)),g.style.strokeDashoffset=String(l*(1-c/a.seconds)),c===0&&!d&&(d=!0,a.redirect&&!e.reducedMotion&&e.navigate(i.href??"/"))},destroy:()=>o.remove()}}};export{x as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{b as T}from"./chunk-JLRXT2AZ.js";import{a as k}from"./chunk-4ZBXB36L.js";import{f as P}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var q={id:"cross-stitch",name:"Cross Stitch",description:"An embroidery hoop where the error is being stitched, one little X at a time, with a floral border and a needle still dangling.",category:"Paper & Print",kind:"2d",motion:"live",tags:["canvas","craft","embroidery","cozy","handmade","light","pixel"],layout:"right",copy:{eyebrow:"Home sweet home",title:"Stitched with love, still not found.",message:"We embroidered the error by hand. The page you wanted wasn't in the pattern.",actions:[{label:"Home sweet home",href:"/",variant:"primary",icon:"home"}]},params:{fabric:"#f4efe4",thread:"#c2185b",border:"#2f7d4a",hoop:"#c9955a"},theme:{bg:"#e9dfcf",fg:"#3a1d14",accent:"#3a1d14","accent-fg":"#fff","font-display":"var(--lp-font-serif)"},presetName:"Rose",presets:{navy:{name:"Navy",params:{thread:"#1f3a8a",border:"#c2185b"},theme:{fg:"#0f1f4a",accent:"#0f1f4a"}},rainbow:{name:"Sampler",params:{thread:"#e4572e",border:"#4ea8de",fabric:"#fbf7ee"}},dark:{name:"Black Aida",params:{fabric:"#1d1d20",thread:"#ffd23f",border:"#ff6b9a",hoop:"#8a6a4a"},theme:{bg:"#121214",fg:"#f6f0e2",accent:"#ffd23f","accent-fg":"#121214"}}},css:`& .lp-overlay{padding-right:clamp(24px,7cqw,120px)}& .lp-head,& .lp-body{max-width:min(440px,38cqw)}
|
|
2
|
+
@container (max-width:760px){& .lp-head,& .lp-body{max-width:none}& .lp-overlay{justify-content:flex-end}}`,setup(b){let i=b.params,o=k(b),y=30,S=30,a=[];return(()=>{let g=T(b.copy.code||"404",24,10,900);a=[];for(let e=0;e<10;e++)for(let n=0;n<24;n++)g[e*24+n]&&a.push([n+3,e+10,i.thread]);for(let e=1;e<y-1;e++)e%2&&a.push([e,2,i.border],[e,S-3,i.border]);for(let e=3;e<S-3;e++)e%2&&a.push([1,e,i.border],[y-2,e,i.border]);for(let[e,n]of[[5,5],[24,5],[5,24],[24,24]])for(let[t,l]of[[0,-1],[-1,0],[1,0],[0,1]])a.push([e+t,n+l,i.thread]);a.push([5,5,"#ffd23f"],[24,5,"#ffd23f"],[5,24,"#ffd23f"],[24,24,"#ffd23f"])})(),{resize(){o.reset()},frame(g){let e=o.g;o.reset(),e.fillStyle="#e9dfcf",e.fillRect(0,0,o.w,o.h);let n=o.w<760,t=n?Math.min(o.w*.42,o.h*.3):Math.min(o.h*.42,o.w*.28),l=n?o.w/2:o.w*.32,s=n?o.h*.32:o.h/2;e.fillStyle="rgba(0,0,0,.15)",e.beginPath(),e.arc(l+8,s+12,t*1.04,0,Math.PI*2),e.fill(),e.fillStyle=i.hoop,e.beginPath(),e.arc(l,s,t*1.06,0,Math.PI*2),e.fill(),e.fillStyle=i.fabric,e.beginPath(),e.arc(l,s,t,0,Math.PI*2),e.fill(),e.save(),e.beginPath(),e.arc(l,s,t,0,Math.PI*2),e.clip();let r=t*2/y,w=l-t,u=s-t;e.fillStyle=P("#000000",.05);for(let f=0;f<=y;f++)e.fillRect(w+f*r-.5,u,1,t*2),e.fillRect(w,u+f*r-.5,t*2,1);let v=b.reducedMotion?a.length:Math.min(a.length,Math.floor(g*34));e.lineCap="round";for(let f=0;f<v;f++){let[x,d,h]=a[f],m=w+x*r+r*.18,p=u+d*r+r*.18,c=r*.64;e.strokeStyle=h,e.lineWidth=r*.22,e.beginPath(),e.moveTo(m,p),e.lineTo(m+c,p+c),e.moveTo(m+c,p),e.lineTo(m,p+c),e.stroke(),e.strokeStyle=P("#ffffff",.25),e.lineWidth=r*.06,e.beginPath(),e.moveTo(m+c*.1,p+c*.05),e.lineTo(m+c*.9,p+c*.85),e.stroke()}if(e.restore(),v>0&&v<a.length){let[f,x]=a[v-1],d=w+f*r+r*.5,h=u+x*r+r*.5;e.strokeStyle=i.thread,e.lineWidth=1.5,e.beginPath(),e.moveTo(d,h),e.quadraticCurveTo(d+40,h+60+Math.sin(g*3)*6,d+70,h+20),e.stroke(),e.strokeStyle="#9aa0a6",e.lineWidth=2.2,e.beginPath(),e.moveTo(d+70,h+20),e.lineTo(d+100,h-10),e.stroke()}e.fillStyle=i.hoop,e.fillRect(l-14,s-t*1.16,28,t*.14),e.fillStyle="#c9ced6",e.fillRect(l-4,s-t*1.22,8,t*.1)}}}};export{q as default};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import{a as h}from"./chunk-LMRCHEWX.js";import{a as n,b as p,c,h as m}from"./chunk-QJZBGT2Q.js";import{e as a}from"./chunk-HXSSPN2I.js";import{a as f,e as r}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var d=`
|
|
2
|
+
uniform sampler2D uSign;
|
|
3
|
+
uniform vec3 uTop, uDeep, uGlow, uSand;
|
|
4
|
+
uniform float uJellies;
|
|
5
|
+
${n}
|
|
6
|
+
${p}
|
|
7
|
+
${c}
|
|
8
|
+
|
|
9
|
+
vec4 jelly(vec2 p, vec2 c, float s, float t, float seed) {
|
|
10
|
+
vec2 q = (p - c) / s;
|
|
11
|
+
float pulse = 1.0 + 0.12 * sin(t * 2.2 + seed * 6.0);
|
|
12
|
+
q.x /= pulse;
|
|
13
|
+
float bell = length(q * vec2(1.0, 1.4)) - 0.5;
|
|
14
|
+
bell = max(bell, -q.y - 0.02);
|
|
15
|
+
float m = smoothstep(0.03, -0.03, bell);
|
|
16
|
+
float rim = smoothstep(0.08, 0.0, abs(bell)) * 0.8;
|
|
17
|
+
// trailing tentacles
|
|
18
|
+
float ten = 0.0;
|
|
19
|
+
for (int i = 0; i < 5; i++) {
|
|
20
|
+
float fi = float(i);
|
|
21
|
+
float x = (fi - 2.0) * 0.16 + sin(q.y * 6.0 + t * 2.0 + fi + seed) * 0.05 * (-q.y);
|
|
22
|
+
ten += smoothstep(0.02, 0.0, abs(q.x - x)) * step(q.y, 0.0) * smoothstep(-1.6, -0.1, q.y);
|
|
23
|
+
}
|
|
24
|
+
return vec4(uGlow, clamp(m * 0.35 + rim + ten * 0.45, 0.0, 1.0));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
void main() {
|
|
28
|
+
vec2 fc = gl_FragCoord.xy;
|
|
29
|
+
vec2 uv = fc / uRes;
|
|
30
|
+
vec2 p = (fc - 0.5 * uRes) / uRes.y;
|
|
31
|
+
float t = uTime;
|
|
32
|
+
vec3 col = mix(uDeep, uTop, smoothstep(-0.6, 0.6, p.y));
|
|
33
|
+
// god rays from the surface
|
|
34
|
+
float rays = 0.0;
|
|
35
|
+
for (int i = 0; i < 4; i++) {
|
|
36
|
+
float fi = float(i);
|
|
37
|
+
rays += pow(max(sin((p.x + p.y * 0.35) * (6.0 + fi * 3.0) + t * (0.2 + fi * 0.07) + fi), 0.0), 8.0) * (0.5 - fi * 0.1);
|
|
38
|
+
}
|
|
39
|
+
col += uTop * rays * smoothstep(-0.4, 0.5, p.y) * 0.35;
|
|
40
|
+
// seabed with the sunken sign
|
|
41
|
+
float bed = -0.36 + 0.03 * sin(p.x * 4.0) + 0.02 * fbm(vec2(p.x * 3.0, 1.0));
|
|
42
|
+
if (p.y < bed) {
|
|
43
|
+
col = uSand * (0.6 + 0.4 * fbm(p * 20.0)) * (0.5 + 0.5 * smoothstep(-0.6, bed, p.y));
|
|
44
|
+
float caus = pow(abs(sin(fbm(p * 12.0 + t * 0.3) * 10.0)), 6.0);
|
|
45
|
+
col += uTop * caus * 0.15;
|
|
46
|
+
}
|
|
47
|
+
// the sign: tilted, half buried, a bit of algae
|
|
48
|
+
vec2 sp = p - vec2(0.0, -0.08);
|
|
49
|
+
float ang = -0.06;
|
|
50
|
+
sp = mat2(cos(ang), -sin(ang), sin(ang), cos(ang)) * sp;
|
|
51
|
+
vec2 suv = sp / vec2(1.1, 0.45) + 0.5;
|
|
52
|
+
if (suv.x > 0.0 && suv.x < 1.0 && suv.y > 0.0 && suv.y < 1.0) {
|
|
53
|
+
vec4 s = texture(uSign, suv);
|
|
54
|
+
vec3 sc = s.rgb * (0.55 + 0.25 * smoothstep(-0.4, 0.4, p.y)) * (0.85 + 0.15 * fbm(sp * 14.0));
|
|
55
|
+
sc = mix(sc, vec3(0.12, 0.3, 0.18), smoothstep(0.55, 0.8, fbm(sp * 9.0 + 3.0)) * 0.6);
|
|
56
|
+
col = mix(col, sc, s.a);
|
|
57
|
+
}
|
|
58
|
+
// jellyfish drifting up
|
|
59
|
+
for (int i = 0; i < 6; i++) {
|
|
60
|
+
float fi = float(i);
|
|
61
|
+
if (fi >= uJellies) break;
|
|
62
|
+
float y = mod(hash11(fi) * 2.0 + t * (0.025 + hash11(fi + 2.0) * 0.02), 1.6) - 0.8;
|
|
63
|
+
vec2 c = vec2((hash11(fi * 5.0) - 0.5) * 1.6 + sin(t * 0.3 + fi) * 0.05, y);
|
|
64
|
+
vec4 j = jelly(p, c, 0.06 + hash11(fi * 9.0) * 0.06, t, fi);
|
|
65
|
+
col = mix(col, j.rgb * 1.2, j.a * 0.75);
|
|
66
|
+
col += uGlow * 0.06 * exp(-length(p - c) * 9.0);
|
|
67
|
+
}
|
|
68
|
+
// bubbles
|
|
69
|
+
for (int i = 0; i < 24; i++) {
|
|
70
|
+
float fi = float(i);
|
|
71
|
+
float y = mod(hash11(fi * 3.0) + t * (0.06 + hash11(fi) * 0.08), 1.4) - 0.7;
|
|
72
|
+
vec2 c = vec2((hash11(fi * 7.0) - 0.5) * 1.8 + sin(y * 12.0 + fi) * 0.01, y);
|
|
73
|
+
float r = 0.004 + hash11(fi * 11.0) * 0.006;
|
|
74
|
+
float d = length(p - c);
|
|
75
|
+
col += vec3(0.7, 0.9, 1.0) * (smoothstep(r, r * 0.6, d) - smoothstep(r * 0.6, r * 0.3, d) * 0.6) * 0.5;
|
|
76
|
+
}
|
|
77
|
+
// marine snow
|
|
78
|
+
vec2 g = p * 90.0 + vec2(0.0, t * 2.0);
|
|
79
|
+
vec2 id = floor(g);
|
|
80
|
+
col += vec3(0.6) * smoothstep(0.08, 0.0, length(fract(g) - 0.5 - (hash22(id) - 0.5) * 0.6)) * step(0.97, hash12(id)) * 0.25;
|
|
81
|
+
col = toSRGB(aces(col * 1.1));
|
|
82
|
+
col *= mix(0.6, 1.0, vignette(uv, 0.3));
|
|
83
|
+
fragColor = vec4(col, 1.0);
|
|
84
|
+
}
|
|
85
|
+
`,w={id:"deep-sea",name:"Sunken Sign",description:"Thirty metres down, the 404 sign rests on the seabed while jellyfish glow and drift past in the light shafts.",category:"Ocean",kind:"2d",motion:"live",tags:["webgl","underwater","ocean","jellyfish","calm","blue","deep"],layout:"top",codeInScene:!0,copy:{eyebrow:"Depth: 404 m",title:"This page sank without a trace.",message:"It's resting somewhere down here with the jellyfish. Surface slowly and head home.",actions:[{label:"Surface",href:"/",variant:"primary"}]},params:{top:"#1d8fb3",deep:"#020c1a",glow:"#8ff3ff",sand:"#6b6a55",jellies:5},theme:{bg:"#03182a",fg:"#e6fbff",accent:"#e6fbff","accent-fg":"#03182a"},presetName:"Twilight Zone",presets:{kelp:{name:"Kelp Forest",params:{top:"#3a9a6a",deep:"#031a12",glow:"#d9ff8a",sand:"#5a5a3a",jellies:3},theme:{bg:"#06261a"}},red:{name:"Red Tide",params:{top:"#b8402a",deep:"#1a0505",glow:"#ffd2a8",sand:"#4a2a1a"},theme:{bg:"#2a0a08"}},tropical:{name:"Tropical Reef",params:{top:"#3fd6c8",deep:"#03485a",glow:"#ffb3e6",sand:"#e8d6a8"},theme:{bg:"#0a5a6b"}},abyss:{name:"Abyss",eyebrow:"Depth: 4,040 m",params:{top:"#062a3a",deep:"#000308",glow:"#c08bff",sand:"#2a2a24",jellies:6},theme:{bg:"#000814"}}},css:"& .lp-overlay{padding-top:clamp(24px,6cqh,70px)}",setup(i){let t=i.params,o=document.createElement("canvas");o.width=1100,o.height=450;let e=o.getContext("2d");e.fillStyle="#c9b28a",e.beginPath(),e.roundRect(20,20,1060,410,30),e.fill(),e.strokeStyle="#5a4630",e.lineWidth=16,e.stroke(),e.fillStyle="#3a2a1a",e.save(),e.translate(0,65),r(e,i.copy.code||"404",{width:1100,height:320,font:f,weight:900,fit:.78,color:"#3a2a1a"}),e.restore();for(let s=0;s<60;s++)e.fillStyle=`rgba(120,60,20,${Math.random()*.35})`,e.beginPath(),e.arc(Math.random()*1100,Math.random()*450,4+Math.random()*30,0,Math.PI*2),e.fill();let l;return h(i,{frag:d,init(s){l=m(s,o,{filter:"mipmap"})},uniforms:()=>({uSign:l,uTop:a(t.top),uDeep:a(t.deep),uGlow:a(t.glow),uSand:a(t.sand),uJellies:t.jellies})})}};export{w as default};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import{a,d as s}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var l={id:"divider",name:"Divider",description:"\u201C404 | This page could not be found.\u201D The tiny, honest framework-default look: code and message on one line, split by a thin rule.",category:"Simple",kind:"2d",motion:"static",tags:["simple","minimal","nextjs","default","static","fast","developer"],layout:"none",copy:{title:"This page could not be found.",actions:[{label:"Home",href:"/"}]},params:{size:14},theme:{bg:"#ffffff",fg:"#000000"},presetName:"Light",presets:{dark:{name:"Dark",theme:{bg:"#000000",fg:"#ffffff"}},mono:{name:"Mono",params:{size:13},theme:{bg:"#f6f6f4",fg:"#222",font:"ui-monospace,SFMono-Regular,Menlo,monospace"}},large:{name:"Large",params:{size:22},theme:{bg:"#111318",fg:"#e8eaf0"}}},css:`
|
|
2
|
+
& .dv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;font-size:calc(var(--s) * 1px);padding:16px}
|
|
3
|
+
& .dv .row{display:flex;align-items:center}
|
|
4
|
+
& .dv .code{margin:0 20px 0 0;padding-right:23px;font-size:calc(var(--s) * 1.7px);font-weight:500;line-height:49px;border-right:1px solid color-mix(in srgb,var(--lp-fg) 30%,transparent)}
|
|
5
|
+
& .dv h1{margin:0;font-size:inherit;font-weight:400;line-height:49px}
|
|
6
|
+
& .dv a{color:color-mix(in srgb,var(--lp-fg) 55%,transparent);text-decoration:none;font-size:.9em}
|
|
7
|
+
& .dv a:hover{color:var(--lp-fg);text-decoration:underline}
|
|
8
|
+
@container (max-width:380px){& .dv .row{flex-direction:column}& .dv .code{border:0;margin:0;padding:0}}
|
|
9
|
+
`,setup(t){let n=t.copy,i=s(t,"dv",`<div class="row"><p class="code" aria-hidden="true">${a(n.code)}</p><h1><span class="lp-sr">Error ${a(n.code)}: </span>${a(n.title)}</h1></div>`,{s:t.params.size});for(let r of n.actions){let e=document.createElement("a");e.href=r.href??"/",e.textContent=r.label,e.addEventListener("click",o=>{o.metaKey||o.ctrlKey||(o.preventDefault(),t.navigate(e.getAttribute("href"),o))}),i.append(e)}return{destroy:()=>i.remove()}}};export{l as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as u}from"./chunk-4ZBXB36L.js";import{f as h}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var D={id:"dna",name:"Double Helix",description:"A strand of DNA twists slowly in 3D. Every base pair is in place except one, and that gap is where the page should be.",category:"Abstract",kind:"3d",motion:"live",tags:["canvas","science","biology","3d","helix","light","lab"],layout:"left",copy:{eyebrow:"Sequence error",title:"A base pair is missing.",message:"We sequenced the whole site and found a gap exactly where this page should be.",actions:[{label:"Back to the lab",href:"/",variant:"primary"}]},params:{bg:"#f4f7fb",strand1:"#2b59ff",strand2:"#ff4f8b",bases:["#ffb000","#16c47f","#7a3dff","#1fb5ff"],missing:"#e5484d"},theme:{bg:"#f4f7fb",fg:"#0f1a33",accent:"#0f1a33","accent-fg":"#fff"},presetName:"Lab",presets:{dark:{name:"Fluorescence",params:{bg:"#03050c",strand1:"#3bd6ff",strand2:"#ff3bd4",bases:["#ffe14d","#3dff8a","#b45cff","#ff7a3d"],missing:"#ff3b3b"},theme:{bg:"#03050c",fg:"#e6f6ff",accent:"#3bd6ff","accent-fg":"#03050c"}},mono:{name:"Monochrome",params:{bg:"#ffffff",strand1:"#111111",strand2:"#555555",bases:["#999999","#bbbbbb"],missing:"#e5484d"},theme:{bg:"#fff",fg:"#111",accent:"#111","accent-fg":"#fff"}}},css:`& .lp-overlay{padding-left:max(16px,calc(var(--lp-pad) * 1.5))}& .lp-head,& .lp-body{max-width:min(440px,38cqw)}
|
|
2
|
+
@container (max-width:760px){& .lp-head,& .lp-body{max-width:none}& .lp-overlay{justify-content:flex-end}}`,setup(l){let n=l.params,s=u(l);return{resize(){s.reset()},frame(x){let e=s.g;s.reset(),e.fillStyle=n.bg,e.fillRect(0,0,s.w,s.h);let d=s.w<760,g=d?s.w/2:s.w*.66,m=d?s.h*.55:s.h*.86,v=d?s.h*.04:(s.h-m)/2,p=Math.min(s.w*.1,120),y=26,z=13,o=[];for(let t=0;t<y;t++){let a=v+t/(y-1)*m,b=t*.48+x*.6,i=g+Math.cos(b)*p,f=Math.sin(b),r=g+Math.cos(b+Math.PI)*p,c=-f,M=7+f*3,P=7+c*3;if(t===z)o.push({z:0,draw:()=>{e.strokeStyle=n.missing,e.setLineDash([4,5]),e.lineWidth=2,e.beginPath(),e.moveTo(i,a),e.lineTo(r,a),e.stroke(),e.setLineDash([]),e.fillStyle=n.missing,e.font="700 13px ui-monospace,Menlo,monospace",e.textAlign="left",e.fillText(`\u2190 ${l.copy.code}: missing`,Math.max(i,r)+18,a+4)}});else{let k=n.bases[t%n.bases.length],S=n.bases[(t+2)%n.bases.length];o.push({z:(f+c)/2-.01,draw:()=>{let w=(i+r)/2;e.lineWidth=5,e.lineCap="round",e.strokeStyle=k,e.beginPath(),e.moveTo(i,a),e.lineTo(w,a),e.stroke(),e.strokeStyle=S,e.beginPath(),e.moveTo(w,a),e.lineTo(r,a),e.stroke()}})}o.push({z:f,draw:()=>(e.fillStyle=h(n.strand1,.55+.45*(f*.5+.5)),e.beginPath(),e.arc(i,a,M,0,Math.PI*2),e.fill())}),o.push({z:c,draw:()=>(e.fillStyle=h(n.strand2,.55+.45*(c*.5+.5)),e.beginPath(),e.arc(r,a,P,0,Math.PI*2),e.fill())})}o.sort((t,a)=>t.z-a.z).forEach(t=>t.draw())}}}};export{D as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S}from"./chunk-4ZBXB36L.js";import{f as y}from"./chunk-HXSSPN2I.js";import{a as w,f as M}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var N={id:"dominoes",name:"Dominoes",description:"Hundreds of dominoes stand in the shape of the error. One tips and the whole thing goes down in a satisfying wave, then they all stand up again.",category:"Physics",kind:"2d",motion:"live",tags:["canvas","dominoes","satisfying","chain-reaction","playful","light"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Chain reaction",title:"One broken link, and everything fell.",message:"A single bad link knocked this page over. The homepage is still standing.",actions:[{label:"Back to solid ground",href:"/",variant:"primary"}]},params:{table:"#2f6b4a",tile:"#f6f3ea",pip:"#111111",sweep:3.2},theme:{bg:"#2f6b4a",fg:"#f6f3ea",accent:"#f6f3ea","accent-fg":"#1d3f2c"},presetName:"Green Felt",presets:{wood:{name:"Oak Table",params:{table:"#a8774a",tile:"#111111",pip:"#f6f3ea"},theme:{bg:"#a8774a",fg:"#1f1208",accent:"#1f1208","accent-fg":"#fff"}},marble:{name:"Marble",params:{table:"#eceae4",tile:"#1d1d1f",pip:"#ffffff"},theme:{bg:"#eceae4",fg:"#1d1d1f",accent:"#1d1d1f","accent-fg":"#fff"}},neon:{name:"Neon",params:{table:"#07070f",tile:"#ff3bd4",pip:"#ffffff"},theme:{bg:"#07070f",fg:"#ffe6fb",accent:"#ff3bd4","accent-fg":"#fff"}}},setup(m){let f=m.params,a=S(m),h=m.random,g=[],p=10,u=()=>{let o=Math.min(a.w*.82,1100),e=Math.min(o*.4,a.h*.44);p=Math.max(7,Math.round(o/70));let r=M(m.copy.code||"404",{width:o,height:e,font:w,weight:900,fit:.95,step:p,random:h});g=[];for(let c=0;c<r.length;c+=2){let d=r[c]+(a.w-o)/2,t=r[c+1]+a.h*.4-e/2;g.push({x:d,y:t,order:(d-(a.w-o)/2)/o+(h()-.5)*.02,ang:0,pips:Math.floor(h()*6)+1})}};u();let k=()=>f.sweep+3.4;return{resize(){a.reset(),u()},frame(o){let e=a.g;a.reset(),e.fillStyle=f.table,e.fillRect(0,0,a.w,a.h),e.fillStyle=y("#000000",.05);for(let s=0;s<a.h;s+=3)e.fillRect(0,s,a.w,1);let r=m.reducedMotion?0:o%k(),c=(r-.6)/f.sweep,d=r>f.sweep+2.2?Math.min(1,(r-f.sweep-2.2)/.8):0,t=p*.42,n=p*.95;for(let s of g){let v=Math.max(0,Math.min(1,(c-s.order)*14)),b=Math.min(1,v)*(1-d),i=b*b*(3-2*b);if(e.save(),e.translate(s.x,s.y),e.fillStyle="rgba(0,0,0,.25)",e.fillRect(-t/2+2+i*n*.5,-n*.15*(1-i)+2,t+i*n*.3,n*.25+i*n*.6),i<.5){e.fillStyle=f.tile;let l=n*(1-i*1.2);e.fillRect(-t/2+i*n*.6,-l,t,l),e.fillStyle=y("#000000",.15),e.fillRect(-t/2+i*n*.6,-l,t,2)}else{e.fillStyle=f.tile,e.beginPath(),e.roundRect(0,-t/2,n*i,t,1.5),e.fill(),e.fillStyle=f.pip,e.fillRect(n*i*.5-.5,-t/2+1,1,t-2);for(let l=0;l<Math.min(3,s.pips);l++)e.beginPath(),e.arc(n*i*(.15+l*.12),-t*.15+l%2*t*.3,Math.max(.8,t*.1),0,Math.PI*2),e.fill()}e.restore()}}}}};export{N as default};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var r={id:"dot-grid",name:"Dot Grid",description:"A dotted (or lined) grid that fades out towards the edges, with a small status pill above the headline. The quiet developer-tool look.",category:"Simple",kind:"2d",motion:"static",tags:["simple","grid","dots","developer","saas","static","fast"],layout:"center",copy:{eyebrow:"404 error",title:"We can\u2019t find that page",message:"Check the URL for typos, or head back to the dashboard.",actions:[{label:"Back to dashboard",href:"/"},{label:"Documentation",href:"/docs",variant:"secondary",icon:"arrow"}]},params:{dot:"#cbd5e1",gap:22,lines:!1},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#0f172a","accent-fg":"#ffffff",radius:"10px"},presetName:"Light",presets:{dark:{name:"Dark",params:{dot:"#273043"},theme:{bg:"#0a0d14",fg:"#f1f5f9",accent:"#f1f5f9","accent-fg":"#0a0d14"}},lines:{name:"Lines",params:{lines:!0,gap:40,dot:"#e5e7eb"}},blueprint:{name:"Blueprint",params:{lines:!0,gap:28,dot:"#2f5fb3"},theme:{bg:"#1b3f86",fg:"#ffffff",accent:"#ffffff","accent-fg":"#1b3f86"}}},css:`
|
|
2
|
+
& .dg{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 100%)}
|
|
3
|
+
& .dg.dots{background-image:radial-gradient(var(--dot) 1.2px,transparent 1.6px);background-size:var(--gap) var(--gap);background-position:center}
|
|
4
|
+
& .dg.lines{background-image:linear-gradient(var(--dot) 1px,transparent 1px),linear-gradient(90deg,var(--dot) 1px,transparent 1px);background-size:var(--gap) var(--gap);background-position:center}
|
|
5
|
+
& .lp-code{display:none}
|
|
6
|
+
& .lp-eyebrow{letter-spacing:.04em;text-transform:none;font-size:12.5px;font-weight:600;color:var(--lp-fg);padding:6px 12px;border-radius:999px;
|
|
7
|
+
border:1px solid color-mix(in srgb,var(--lp-fg) 14%,transparent);background:color-mix(in srgb,var(--lp-bg) 80%,transparent);margin-bottom:22px}
|
|
8
|
+
& .lp-title{font-weight:700;font-size:clamp(28px,4.6cqw,54px)}
|
|
9
|
+
& .lp-btn--primary{font-weight:600}
|
|
10
|
+
& .lp-btn--secondary{border:0;font-weight:600}
|
|
11
|
+
`,setup(t){let a=t.params,e=document.createElement("div");return e.className="dg "+(a.lines?"lines":"dots"),e.style.setProperty("--dot",a.dot),e.style.setProperty("--gap",a.gap+"px"),t.stage.append(e),{destroy:()=>e.remove()}}};export{r as default};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import{a as t,c as n,d as r,e as s}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var p={id:"editorial",name:"Editorial",description:"A calm, magazine-style page: an elegant italic serif headline, a hairline rule and understated links. For blogs, studios and writers.",category:"Simple",kind:"2d",motion:"static",tags:["simple","serif","editorial","blog","elegant","static","fast","light"],layout:"none",copy:{title:"The page you were reading has gone out of print.",message:"Perhaps it was moved to the archive, or perhaps it was never written.",actions:[{label:"Return to the front page",href:"/",icon:"none"},{label:"Browse the archive",href:"/archive",variant:"secondary",icon:"none"}]},params:{section:"Chapter 404"},theme:{bg:"#f7f4ee",fg:"#1d1b18",accent:"#1d1b18","accent-fg":"#f7f4ee","font-display":'"Fraunces","Playfair Display","Iowan Old Style",Georgia,serif'},presetName:"Ivory",presets:{night:{name:"Night",theme:{bg:"#14120f",fg:"#ede6da",accent:"#ede6da","accent-fg":"#14120f"}},rose:{name:"Rose",params:{section:"Errata \xB7 No. 404"},title:"We seem to have misplaced this page.",theme:{bg:"#f8ece9",fg:"#3d1a16",accent:"#9f2a20","accent-fg":"#fff"}}},css:`
|
|
2
|
+
& .ed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(24px,7cqw,110px) 20px;overflow:auto}
|
|
3
|
+
& .ed .in{width:min(760px,100%)}
|
|
4
|
+
& .ed .sec{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--lp-muted)}
|
|
5
|
+
& .ed .sec::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--lp-fg) 25%,transparent)}
|
|
6
|
+
& .ed h1{margin:26px 0 0;font-family:var(--lp-font-display);font-style:italic;font-weight:400;font-size:clamp(34px,6cqw,76px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
|
|
7
|
+
& .ed p{margin:24px 0 0;max-width:46ch;font-family:var(--lp-font-display);font-size:clamp(16px,1.6cqw,20px);line-height:1.55;color:var(--lp-muted)}
|
|
8
|
+
& .ed .lp-actions{justify-content:flex-start;margin-top:34px}
|
|
9
|
+
& .ed .lp-btn--primary{border-radius:0;padding:14px 22px;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
|
|
10
|
+
& .ed .lp-btn--secondary{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
|
|
11
|
+
`,setup(e){let a=e.copy,i=r(e,"ed",`<div class="in"><div class="sec">${t(e.params.section)}</div><h1>${s(a.code)}${t(a.title)}</h1><p>${t(a.message)}</p></div>`);return i.querySelector(".in").append(n(e)),{destroy:()=>i.remove()}}};export{p as default};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var i=n=>n.replace(/[&<>"]/g,o=>({"&":"&","<":"<",">":">",'"':"""})[o]),m={id:"elevator",name:"Floor 404",description:"An elevator climbs floor by floor to 404. Ding. The doors open onto nothing. The call panel takes you anywhere else.",category:"Urban",kind:"2d",motion:"live",tags:["dom","css","elevator","building","funny","interactive"],layout:"none",copy:{title:"This floor doesn't exist.",message:"The building has no floor 404. Please choose another floor.",actions:[{label:"Lobby",href:"/",variant:"primary"},{label:"Blog",href:"/blog",variant:"secondary"},{label:"Contact",href:"/contact",variant:"secondary"}]},params:{metal:"#b9bfc7",frame:"#2b2f36",wall:"#e8e2d6",led:"#ff5a3c",behind:"void"},theme:{bg:"#e8e2d6",fg:"#1d1f24",accent:"#1d1f24","accent-fg":"#fff"},presetName:"Office Tower",presets:{neon:{name:"Hotel Neon",params:{metal:"#2a2f45",frame:"#0d0f1c",wall:"#1a1530",led:"#ff3bd4",behind:"void"},theme:{bg:"#1a1530",fg:"#ffe6fb",accent:"#ff3bd4","accent-fg":"#fff"}},deco:{name:"Art Deco",params:{metal:"#c9a45c",frame:"#1a1410",wall:"#2a2018",led:"#ffcf6b",behind:"bricks"},theme:{bg:"#2a2018",fg:"#f3e6c8",accent:"#c9a45c","accent-fg":"#1a1410"}},sky:{name:"Sky Lobby",params:{metal:"#d9dde3",frame:"#ffffff",wall:"#f4f6f8",led:"#2b8cff",behind:"sky"},theme:{bg:"#f4f6f8",fg:"#0f1a2a",accent:"#2b8cff","accent-fg":"#fff"}}},css:`
|
|
2
|
+
& .el{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(18px,4cqw,56px);padding:20px;background:var(--wall);
|
|
3
|
+
background-image:linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);background-size:120px 100%}
|
|
4
|
+
& .el-shaft{--W:clamp(220px,30cqw,380px);position:relative;width:var(--W);display:flex;flex-direction:column;align-items:center}
|
|
5
|
+
& .el-ind{display:flex;align-items:center;gap:10px;background:#0b0b0b;color:var(--led);border-radius:8px;padding:8px 16px;margin-bottom:16px;
|
|
6
|
+
font:700 clamp(22px,2.6cqw,34px)/1 "DSEG7 Classic",ui-monospace,Menlo,monospace;text-shadow:0 0 10px var(--led);min-width:7ch;justify-content:center;box-shadow:inset 0 0 0 2px #222}
|
|
7
|
+
& .el-ind .arrow{font-size:.7em;transition:opacity .2s}
|
|
8
|
+
& .el-frame{position:relative;width:100%;aspect-ratio:3/4.2;background:var(--frame);padding:14px;border-radius:6px 6px 0 0;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);overflow:hidden}
|
|
9
|
+
& .el-inside{position:absolute;inset:14px 14px 0;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px;color:#fff}
|
|
10
|
+
& .el-inside.void{background:radial-gradient(ellipse at 50% 40%,#1c1f2a,#000 70%)}
|
|
11
|
+
& .el-inside.void::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18%,rgba(255,255,255,.05) 18% 19%)}
|
|
12
|
+
& .el-inside.bricks{background:#6b3a2a repeating-linear-gradient(0deg,#5a2f22 0 2px,transparent 2px 26px),#6b3a2a;color:#ffe9d0}
|
|
13
|
+
& .el-inside.sky{background:linear-gradient(180deg,#7fb8ff,#dff0ff);color:#0f1a2a}
|
|
14
|
+
& .el-inside b{font:800 clamp(40px,6cqw,76px)/1 var(--lp-font);letter-spacing:-.04em;position:relative}
|
|
15
|
+
& .el-inside span{font:600 12px/1.4 var(--lp-font-mono);letter-spacing:.12em;opacity:.8;position:relative;max-width:22ch}
|
|
16
|
+
& .el-door{position:absolute;top:14px;bottom:0;width:calc(50% - 14px);background:linear-gradient(90deg,color-mix(in srgb,var(--metal) 80%,#000),var(--metal) 30%,color-mix(in srgb,var(--metal) 85%,#fff) 60%,var(--metal));
|
|
17
|
+
transition:transform 1.4s cubic-bezier(.65,0,.35,1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
|
|
18
|
+
& .el-door::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
|
|
19
|
+
& .el-door.l{left:14px}& .el-door.r{right:14px}
|
|
20
|
+
& .el.open .el-door.l{transform:translateX(-96%)}& .el.open .el-door.r{transform:translateX(96%)}
|
|
21
|
+
& .el-floor{width:calc(100% + 40px);height:14px;background:linear-gradient(180deg,#9aa0a8,#6b7078);border-radius:2px}
|
|
22
|
+
& .el-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--metal) 90%,#fff),var(--metal));border-radius:12px;padding:18px 16px;display:flex;flex-direction:column;gap:12px;align-items:center;
|
|
23
|
+
box-shadow:0 20px 40px -20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.12);min-width:150px}
|
|
24
|
+
& .el-panel h1{margin:0 0 4px;font:700 13px/1.35 var(--lp-font);text-align:center;color:#1d1f24;max-width:16ch}
|
|
25
|
+
& .el-panel p{margin:0;font:500 11px/1.4 var(--lp-font);text-align:center;color:#3a3d44;max-width:18ch}
|
|
26
|
+
& .el-btn{display:flex;align-items:center;gap:10px;text-decoration:none;color:#1d1f24;font:600 13px/1 var(--lp-font);width:100%}
|
|
27
|
+
& .el-btn i{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--lp-font-mono);font-style:normal;
|
|
28
|
+
background:radial-gradient(circle at 40% 35%,#fff,#c9ced6 60%,#8e949c);box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 0 0 2px rgba(0,0,0,.08);transition:box-shadow .2s}
|
|
29
|
+
& .el-btn:hover i{box-shadow:0 0 0 3px var(--led),0 0 14px var(--led)}
|
|
30
|
+
& .el-btn.lit i{box-shadow:0 0 0 2px var(--led),0 0 10px var(--led);color:var(--led)}
|
|
31
|
+
@container (max-width:640px){& .el{flex-direction:column;gap:14px}& .el-shaft{--W:min(60cqw,240px)}& .el-panel{flex-direction:row;flex-wrap:wrap;justify-content:center}& .el-btn{width:auto}}
|
|
32
|
+
`,setup(n){let o=n.params,r=n.copy,d=parseInt(r.code,10)||404,t=document.createElement("div");t.className="el";for(let[e,a]of Object.entries({"--metal":o.metal,"--frame":o.frame,"--wall":o.wall,"--led":o.led}))t.style.setProperty(e,a);let c=["L",...r.actions.slice(1).map((e,a)=>String(a+1))];t.innerHTML=`<div class="el-shaft"><div class="el-ind" aria-hidden="true"><span class="arrow">\u25B2</span><span class="n">1</span></div>
|
|
33
|
+
<div class="el-frame"><div class="el-inside ${o.behind}"><b>${i(r.code)}</b><span>FLOOR NOT FOUND</span></div><div class="el-door l"></div><div class="el-door r"></div></div><div class="el-floor"></div></div>
|
|
34
|
+
<nav class="el-panel" aria-label="Choose a floor"><h1><span class="lp-sr">Error ${i(r.code)}: </span>${i(r.title)}</h1><p>${i(r.message)}</p>
|
|
35
|
+
${r.actions.map((e,a)=>`<a class="el-btn" href="${i(e.href??"/")}" data-i="${a}"><i>${c[a]}</i>${i(e.label)}</a>`).join("")}
|
|
36
|
+
<span class="el-btn lit" aria-hidden="true"><i>${i(r.code)}</i>this floor</span></nav>`,n.root.append(t);let p=t.querySelector(".n"),f=t.querySelector(".arrow");t.querySelectorAll(".el-btn[href]").forEach(e=>e.addEventListener("click",a=>{a.metaKey||a.ctrlKey||(a.preventDefault(),t.classList.remove("open"),e.classList.add("lit"),setTimeout(()=>n.navigate(e.getAttribute("href"),a),900))}));let s=!1;return{frame(e){let l=n.reducedMotion?1:Math.min(1,e/3.2),g=l<.5?2*l*l:1-Math.pow(-2*l+2,2)/2,b=Math.max(1,Math.round(g*d));p.textContent=String(b),f.style.opacity=l<1?String(.4+.6*(Math.floor(e*3)%2)):"0",l>=1&&!s&&(s=!0,setTimeout(()=>t.classList.add("open"),n.reducedMotion?0:400))},destroy(){t.remove()}}}};export{m as default};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var o={id:"emoji",name:"Emoji",description:"One big emoji does the talking. Friendly, instantly readable, and swaps to suit your brand with a single parameter.",category:"Simple",kind:"2d",motion:"live",tags:["simple","emoji","friendly","playful","fast","light"],layout:"center",copy:{eyebrow:"404",title:"Hmm, that page wandered off.",message:"We looked everywhere. It\u2019s not here.",actions:[{label:"Take me home",href:"/",icon:"home"}]},params:{emoji:"\u{1F914}",bob:!0},theme:{bg:"#fffdf7",fg:"#1f2937",accent:"#1f2937","accent-fg":"#fffdf7"},presetName:"Thinking",presets:{ufo:{name:"UFO",title:"Abducted by aliens.",message:"This page was beamed up. We\u2019re negotiating its return.",params:{emoji:"\u{1F6F8}"},theme:{bg:"#0b0b1a",fg:"#e0e7ff",accent:"#a5b4fc","accent-fg":"#0b0b1a"}},ghost:{name:"Ghost",title:"Nobody here but us ghosts.",message:"This page has passed on.",params:{emoji:"\u{1F47B}"},theme:{bg:"#f5f3ff",fg:"#2e1065",accent:"#7c3aed","accent-fg":"#fff"}},desert:{name:"Desert",title:"It\u2019s a desert out here.",message:"Nothing for miles. Let\u2019s head back.",params:{emoji:"\u{1F335}"},theme:{bg:"#fef3c7",fg:"#451a03",accent:"#b45309","accent-fg":"#fff"}},melting:{name:"Melting",title:"Well, this is awkward.",message:"The page you wanted has melted away.",params:{emoji:"\u{1FAE0}",bob:!1},theme:{bg:"#ecfeff",fg:"#083344",accent:"#0e7490","accent-fg":"#fff"}}},css:`
|
|
2
|
+
& .em{display:grid;place-items:center;margin-bottom:clamp(16px,3.5cqh,32px);pointer-events:none}
|
|
3
|
+
& .lp-stage>.em{position:absolute;left:50%;top:18%;translate:-50% 0}
|
|
4
|
+
& .em span{font-size:clamp(80px,14cqw,150px);line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 18px 16px rgba(0,0,0,.12))}
|
|
5
|
+
& .lp-code{display:none}
|
|
6
|
+
& .lp-title{font-weight:700;font-size:clamp(26px,4.2cqw,46px)}
|
|
7
|
+
& .lp-eyebrow{letter-spacing:.2em}
|
|
8
|
+
`,setup(t){let e=document.createElement("div");e.className="em",e.setAttribute("aria-hidden","true");let a=document.createElement("span");return a.textContent=t.params.emoji,e.append(a),(t.overlay?.querySelector(".lp-head")??t.stage).prepend(e),{frame(s){t.params.bob&&(a.style.transform=`translateY(${Math.sin(s*1.6)*8}px) rotate(${Math.sin(s*.8)*4}deg)`)},destroy:()=>e.remove()}}};export{o as default};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import{a as S}from"./chunk-4ZBXB36L.js";import"./chunk-URWX3LLV.js";var k={id:"error-cascade",name:"Error Cascade",description:"The classic frozen-desktop glitch: error dialogs pile up behind your cursor in an endless trail. Move fast and paint the screen with them.",category:"Retro Tech",kind:"2d",motion:"interactive",tags:["canvas","retro","windows","dialog","nostalgia","funny","mouse"],layout:"none",copy:{title:"Page not found",message:"The page you requested could not be found. Click OK to go home.",actions:[{label:"OK",href:"/",variant:"primary"}]},params:{desktop:"#008080",style:"classic"},theme:{bg:"#008080",fg:"#000"},presetName:"Classic",presets:{pink:{name:"Bubblegum Desktop",params:{desktop:"#ff8fb1",style:"classic"},theme:{bg:"#ff8fb1"}},space:{name:"Space Wallpaper",params:{desktop:"#0b0b2e",style:"flat"},theme:{bg:"#0b0b2e",fg:"#fff"}},aqua:{name:"Aqua",params:{desktop:"#5a8fd6",style:"aqua"},theme:{bg:"#5a8fd6"}},flat:{name:"Flat",params:{desktop:"#1e1e24",style:"flat"},theme:{bg:"#1e1e24",fg:"#fff"}}},css:`& .ec-final{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:auto}
|
|
2
|
+
& .ec-final .w{width:min(380px,90cqw);font:12px/1.4 "MS Sans Serif",Tahoma,Geneva,sans-serif;color:#000;background:#c0c0c0;
|
|
3
|
+
box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;padding:3px}
|
|
4
|
+
& .ec-final .tb{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;padding:3px 5px}
|
|
5
|
+
& .ec-final .bd{display:flex;gap:12px;align-items:flex-start;padding:16px 12px 10px}
|
|
6
|
+
& .ec-final .ic{width:34px;height:34px;border-radius:50%;background:#d00;color:#fff;font:900 20px/34px Arial;text-align:center;flex:none}
|
|
7
|
+
& .ec-final h1{font:inherit;margin:0 0 4px;font-weight:700}
|
|
8
|
+
& .ec-final p{margin:0}
|
|
9
|
+
& .ec-final .bt{display:flex;justify-content:center;gap:8px;padding:6px 0 10px}
|
|
10
|
+
& .ec-final a{min-width:78px;text-align:center;padding:4px 10px;color:#000;text-decoration:none;background:#c0c0c0;box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px #808080;outline:1px dotted #000;outline-offset:-5px}
|
|
11
|
+
& .ec-final.aqua .w{background:#ececec;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.4);padding:0;overflow:hidden}
|
|
12
|
+
& .ec-final.aqua .tb{background:linear-gradient(#f4f4f4,#d4d4d4);color:#333;text-align:center;font-weight:600;padding:5px}
|
|
13
|
+
& .ec-final.aqua a{border-radius:12px;background:linear-gradient(#9fd0ff,#3a8eea);color:#fff;box-shadow:none;outline:0}
|
|
14
|
+
& .ec-final.flat .w{background:#2b2b33;color:#eee;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.6);padding:0;overflow:hidden}
|
|
15
|
+
& .ec-final.flat .tb{background:#36363f;color:#ddd;font-weight:600;padding:8px 12px}
|
|
16
|
+
& .ec-final.flat .bd{color:#eee}
|
|
17
|
+
& .ec-final.flat a{border-radius:6px;background:#4c7dff;color:#fff;box-shadow:none;outline:0}`,setup(o){let p=o.params,n=S(o),r=o.copy,g=document.createElement("div");g.className=`ec-final ${p.style}`;let c=t=>t.replace(/[&<>"]/g,l=>({"&":"&","<":"<",">":">",'"':"""})[l]);g.innerHTML=`<div class="w" role="alertdialog" aria-labelledby="ecT"><div class="tb">Error ${c(r.code)}</div><div class="bd"><div class="ic" aria-hidden="true">\u2715</div><div><h1 id="ecT">${c(r.title)}</h1><p>${c(r.message)}</p></div></div>
|
|
18
|
+
<div class="bt">${r.actions.map(t=>`<a href="${c(t.href??"/")}">${c(t.label)}</a>`).join("")}</div></div>`,o.root.append(g),g.querySelectorAll("a").forEach(t=>t.addEventListener("click",l=>{l.metaKey||l.ctrlKey||(l.preventDefault(),o.navigate(t.getAttribute("href"),l))}));let s,b,u=()=>{s=document.createElement("canvas");let t=Math.min(2,o.dpr);s.width=n.w*t,s.height=n.h*t,b=s.getContext("2d"),b.scale(t,t)};u();let a=300,i=120,v=(t,l)=>{let e=b;if(p.style==="classic"){e.fillStyle="#c0c0c0",e.fillRect(t,l,a,i),e.fillStyle="#fff",e.fillRect(t,l,a,1),e.fillRect(t,l,1,i),e.fillStyle="#000",e.fillRect(t,l+i-1,a,1),e.fillRect(t+a-1,l,1,i);let f=e.createLinearGradient(t,0,t+a,0);f.addColorStop(0,"#000080"),f.addColorStop(1,"#1084d0"),e.fillStyle=f,e.fillRect(t+3,l+3,a-6,18),e.fillStyle="#fff",e.font="bold 11px Tahoma, Geneva, sans-serif",e.fillText(`Error ${r.code}`,t+8,l+16),e.fillStyle="#d00",e.beginPath(),e.arc(t+30,l+54,14,0,Math.PI*2),e.fill(),e.fillStyle="#fff",e.font="bold 16px Arial",e.fillText("\u2715",t+24,l+60),e.fillStyle="#000",e.font="11px Tahoma, Geneva, sans-serif",e.fillText(r.title,t+56,l+50),e.fillText("The page could not be found.",t+56,l+66),e.fillStyle="#c0c0c0",e.fillRect(t+a/2-38,l+i-32,76,22),e.strokeStyle="#000",e.strokeRect(t+a/2-38+.5,l+i-32+.5,76,22),e.fillStyle="#000",e.fillText("OK",t+a/2-6,l+i-17)}else if(p.style==="aqua"){e.fillStyle="rgba(0,0,0,.18)",e.fillRect(t+4,l+8,a,i),e.fillStyle="#ececec",e.beginPath(),e.roundRect(t,l,a,i,8),e.fill();let f=e.createLinearGradient(0,l,0,l+22);f.addColorStop(0,"#f8f8f8"),f.addColorStop(1,"#cfcfcf"),e.fillStyle=f,e.beginPath(),e.roundRect(t,l,a,22,[8,8,0,0]),e.fill();for(let[d,w]of["#ff5f57","#febc2e","#28c840"].entries())e.fillStyle=w,e.beginPath(),e.arc(t+14+d*18,l+11,6,0,Math.PI*2),e.fill();e.fillStyle="#333",e.font="600 12px -apple-system, Helvetica, sans-serif",e.fillText(r.title,t+20,l+52),e.fillStyle="#666",e.fillText(`Error ${r.code}.`,t+20,l+70),e.fillStyle="#3a8eea",e.beginPath(),e.roundRect(t+a-86,l+i-34,70,22,11),e.fill(),e.fillStyle="#fff",e.fillText("OK",t+a-59,l+i-19)}else e.fillStyle="rgba(0,0,0,.35)",e.fillRect(t+6,l+10,a,i),e.fillStyle="#2b2b33",e.beginPath(),e.roundRect(t,l,a,i,10),e.fill(),e.fillStyle="#36363f",e.beginPath(),e.roundRect(t,l,a,26,[10,10,0,0]),e.fill(),e.fillStyle="#ddd",e.font="600 12px Inter, system-ui, sans-serif",e.fillText(`Error ${r.code}`,t+12,l+17),e.fillStyle="#ff5a5a",e.fillText("\u25CF",t+14,l+58),e.fillStyle="#eee",e.fillText(r.title,t+32,l+58),e.fillStyle="#4c7dff",e.beginPath(),e.roundRect(t+a-80,l+i-36,64,24,6),e.fill(),e.fillStyle="#fff",e.fillText("OK",t+a-56,l+i-19)},m=-1e9,x=-1e9,h=0;return{resize(){n.reset(),u()},frame(t,l){let e=n.g;n.reset();let f,d;o.pointer.engaged?(f=o.pointer.x-a/2,d=o.pointer.y-20):(h+=l,f=n.w/2-a/2+Math.sin(h*.9)*n.w*.36,d=n.h/2-i/2+Math.sin(h*1.3+1)*n.h*.32),Math.hypot(f-m,d-x)>6&&(l>0||o.pointer.engaged)&&(v(f,d),m=f,x=d),e.fillStyle=p.desktop,e.fillRect(0,0,n.w,n.h),e.drawImage(s,0,0,n.w,n.h)}}}};export{k as default};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var a=p=>p.replace(/[&<>"]/g,r=>({"&":"&","<":"<",">":">",'"':"""})[r]),$={id:"evidence-board",name:"Evidence Board",description:"A detective's cork board: polaroids, sticky notes and red string, all pointing to one unsolved case. Drag the notes around.",category:"Playful",kind:"2d",motion:"interactive",tags:["dom","detective","mystery","funny","drag","interactive","light"],layout:"none",copy:{title:"The case of the missing page",message:"Last seen at this URL. No witnesses. The trail goes cold here.",actions:[{label:"Return to HQ",href:"/",variant:"primary"},{label:"Report a tip",href:"/contact",variant:"secondary"}]},params:{cork:"#c89a63",string:"#d1182b",notes:["#ffe66b","#ff9ec4","#9ee6ff","#b8f29e"]},theme:{bg:"#c89a63",fg:"#1b140c",accent:"#1b140c","accent-fg":"#fff"},presetName:"Cork",presets:{blue:{name:"Blueprint",params:{cork:"#1f4f8f",string:"#ffd23f",notes:["#ffffff","#e6f0ff","#ffffff","#e6f0ff"]},theme:{bg:"#1f4f8f",fg:"#ffffff"}},noir:{name:"Noir",params:{cork:"#2a2622",string:"#ff2b3d",notes:["#f2e9c9","#e8e1cf","#d9d2bd","#f2e9c9"]},theme:{bg:"#2a2622",fg:"#f2e9c9"}},whiteboard:{name:"Whiteboard",params:{cork:"#f4f5f7",string:"#2b6cff",notes:["#ffe66b","#ff9ec4","#9ee6ff","#b8f29e"]},theme:{bg:"#f4f5f7"}}},css:`
|
|
2
|
+
& .eb{position:absolute;inset:0;background-color:var(--cork);overflow:hidden;
|
|
3
|
+
background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
|
|
4
|
+
& .eb svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
|
|
5
|
+
& .eb .it{position:absolute;z-index:1;cursor:grab;touch-action:none;user-select:none;box-shadow:0 10px 18px -8px rgba(0,0,0,.45);transition:box-shadow .2s}
|
|
6
|
+
& .eb .it:active{cursor:grabbing;box-shadow:0 20px 30px -10px rgba(0,0,0,.5);z-index:3}
|
|
7
|
+
& .eb .it::after{content:"";position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8080,#b3001b);box-shadow:0 2px 3px rgba(0,0,0,.4)}
|
|
8
|
+
& .eb .note{width:clamp(130px,13cqw,180px);aspect-ratio:1;padding:16px 14px;font:600 clamp(13px,1.15cqw,16px)/1.3 "Marker Felt","Comic Sans MS","Segoe Print",cursive;color:#2a2010}
|
|
9
|
+
& .eb .polaroid{background:#fff;padding:10px 10px 34px;width:clamp(150px,14cqw,200px)}
|
|
10
|
+
& .eb .polaroid .ph{aspect-ratio:1;background:#1c1c1c;display:flex;align-items:center;justify-content:center;color:#f2f2f2;font:900 clamp(30px,3.4cqw,48px)/1 var(--lp-font)}
|
|
11
|
+
& .eb .polaroid span{display:block;margin-top:8px;font:600 13px/1.2 "Marker Felt","Comic Sans MS",cursive;color:#333;text-align:center}
|
|
12
|
+
& .eb .card{background:#fffdf6;padding:18px 20px;width:clamp(260px,26cqw,360px);color:#1b140c}
|
|
13
|
+
& .eb .card h1{margin:0 0 6px;font:800 clamp(20px,2cqw,28px)/1.1 var(--lp-font-display);letter-spacing:-.02em}
|
|
14
|
+
& .eb .card .stamp{display:inline-block;border:3px solid #c1121f;color:#c1121f;font:900 12px/1 var(--lp-font-mono);letter-spacing:.2em;padding:6px 8px;transform:rotate(-4deg);margin-bottom:10px}
|
|
15
|
+
& .eb .card p{margin:0 0 14px;font-size:14px;line-height:1.5;color:#4a3f30}
|
|
16
|
+
& .eb .card a{display:inline-block;margin-right:10px;margin-top:4px;font-weight:700;color:#1b140c;font-size:14px}
|
|
17
|
+
& .eb .clip{background:#f3efe2;padding:14px;width:clamp(170px,15cqw,220px);font:12px/1.5 "Courier New",ui-monospace,monospace;color:#222}
|
|
18
|
+
`,setup(p){let r=p.params,s=p.copy,y=typeof location<"u"?location.pathname:"/missing",n=document.createElement("div");n.className="eb",n.style.setProperty("--cork",r.cork);let x=[{cls:"card",x:.36,y:.32,r:-1.5,html:`<div class="stamp">UNSOLVED \xB7 ${a(s.code)}</div><h1><span class="lp-sr">Error ${a(s.code)}: </span>${a(s.title)}</h1><p>${a(s.message)}</p>${s.actions.map(e=>`<a href="${a(e.href??"/")}">${a(e.label)} \u2192</a>`).join("")}`},{cls:"polaroid",x:.1,y:.12,r:-6,html:`<div class="ph">${a(s.code)}</div><span>last known photo</span>`},{cls:"note",x:.78,y:.1,r:5,bg:r.notes[0],html:"Who clicked the link?? Check the logs!"},{cls:"note",x:.08,y:.6,r:4,bg:r.notes[1],html:"Not in the cache. Not in the sitemap."},{cls:"clip",x:.74,y:.58,r:-3,html:`EVIDENCE #${a(s.code)}<br>URL: ${a(y.slice(0,40))}<br>STATUS: ${a(s.code)}<br>SUSPECT: broken link<br>MOTIVE: unknown`},{cls:"note",x:.55,y:.74,r:-5,bg:r.notes[2],html:"Homepage = safe house?"},{cls:"note",x:.86,y:.36,r:8,bg:r.notes[3],html:"It was here yesterday\u2026"}];n.innerHTML='<svg aria-hidden="true"></svg>'+x.map((e,t)=>`<div class="it ${e.cls}" data-i="${t}" style="${e.bg?`background:${e.bg};`:""}transform:rotate(${e.r}deg)">${e.html}</div>`).join(""),p.root.append(n);let v=n.querySelector("svg"),g=[...n.querySelectorAll(".it")],l=x.map(e=>({x:e.x,y:e.y})),b=()=>{let e=n.clientWidth,t=n.clientHeight;g.forEach((o,i)=>{let f=o.offsetWidth,d=o.offsetHeight;o.style.left=`${Math.max(8,Math.min(e-f-8,l[i].x*e))}px`,o.style.top=`${Math.max(12,Math.min(t-d-8,l[i].y*t))}px`})},h=()=>{let e=g.map(o=>({x:o.offsetLeft+o.offsetWidth/2,y:o.offsetTop+2})),t=e[0];v.innerHTML=e.slice(1).map(o=>{let i=(o.x+t.x)/2,f=(o.y+t.y)/2+30;return`<path d="M${o.x} ${o.y} Q${i} ${f} ${t.x} ${t.y}" fill="none" stroke="${r.string}" stroke-width="2.2" opacity=".9"/>`}).join("")};g.forEach((e,t)=>{let o=0,i=0,f=0,d=0,m=!1;e.addEventListener("pointerdown",c=>{c.target.closest("a")||(m=!0,o=c.clientX,i=c.clientY,f=e.offsetLeft,d=e.offsetTop,e.setPointerCapture(c.pointerId))}),e.addEventListener("pointermove",c=>{if(!m)return;let k=n.clientWidth,w=n.clientHeight;l[t].x=(f+c.clientX-o)/k,l[t].y=(d+c.clientY-i)/w,b(),h()}),e.addEventListener("pointerup",()=>m=!1)}),n.querySelectorAll(".card a").forEach(e=>e.addEventListener("click",t=>{t.metaKey||t.ctrlKey||(t.preventDefault(),p.navigate(e.getAttribute("href"),t))}));let u=()=>{b(),h()};return requestAnimationFrame(u),{resize:u,frame(){},destroy(){n.remove()}}}};export{$ as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as g}from"./chunk-4ZBXB36L.js";import{f as w}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var A={id:"eyes",name:"Watching",description:"Dozens of eyes in the dark follow your cursor and blink at their own pace. Get too close and they snap shut.",category:"Spooky",kind:"2d",motion:"interactive",tags:["canvas","spooky","eyes","mouse","funny","halloween","dark"],layout:"center",copy:{eyebrow:"We see you",title:"We're looking for it too.",message:"Everyone in here has been searching for this page. None of us can find it.",actions:[{label:"Back to the light",href:"/",variant:"primary"}]},params:{bg:"#050508",sclera:"#f4f1e8",iris:["#3a2a1a","#2a4a6a","#2d5a2d","#5a3a1a"],style:"round",count:46,shy:!0},theme:{bg:"#050508",fg:"#f4f1e8",accent:"#f4f1e8","accent-fg":"#050508","code-color":"rgba(244,241,232,.9)"},presetName:"Cartoon",presets:{owls:{name:"Owls",eyebrow:"Whooo?",title:"Whooo moved this page?",params:{sclera:"#ffb23b",iris:["#1a0f00"],style:"round",count:30,bg:"#0b0f0a"},theme:{accent:"#ffb23b","accent-fg":"#0b0f0a"}},emoji:{name:"Cartoon Pink",params:{bg:"#ff8fb1",sclera:"#ffffff",iris:["#2a1a40","#3a2a1a"],style:"round",count:34},theme:{bg:"#ff8fb1",fg:"#2a0a1a",accent:"#2a0a1a","accent-fg":"#fff","code-color":"#2a0a1a"}},cats:{name:"Alley Cats",eyebrow:"Meow",title:"The cats knocked it off the table.",params:{sclera:"#d9f25a",iris:["#0a0a0a"],style:"slit",count:34,bg:"#07080d"},theme:{accent:"#d9f25a","accent-fg":"#07080d"}},creatures:{name:"Creatures",eyebrow:"Don't move",title:"Something ate this page.",params:{sclera:"#ff3b2f",iris:["#ffb3a8"],style:"glow",count:60,bg:"#030102"},theme:{accent:"#ff3b2f","accent-fg":"#fff","code-color":"rgba(255,59,47,.85)"}},abyss:{name:"Abyss",eyebrow:"Deep down",title:"Nothing down here but us.",params:{sclera:"#7ff6ff",iris:["#02303a"],style:"glow",count:52,bg:"#01060b"},theme:{accent:"#7ff6ff","accent-fg":"#01060b","code-color":"rgba(127,246,255,.85)"}},daylight:{name:"Googly",eyebrow:"Boop",title:"We've got our eyes on this 404.",params:{bg:"#ffd84d",sclera:"#ffffff",iris:["#111111"],style:"round",count:30},theme:{bg:"#ffd84d",fg:"#111",accent:"#111","accent-fg":"#ffd84d","code-color":"#111"}}},css:`& .lp-code{font-weight:800;letter-spacing:-.05em}
|
|
2
|
+
& .lp-content,& .lp-head,& .lp-body{position:relative}`,setup(b){let o=b.params,a=g(b),l=b.random,d=[];function p(){d=[];let t=Math.sqrt(a.w*a.h/(1440*900)),e=Math.round(o.count*Math.max(.5,t)),i=0;for(;d.length<e&&i++<4e3;){let s=(o.style==="round"?14+l()*26:7+l()*14)*Math.max(.7,t),y=s*3+l()*(a.w-s*6),c=s*2+l()*(a.h-s*4),f=(y-a.w/2)/(a.w*.28),r=(c-a.h/2)/(a.h*.3);f*f+r*r<1||d.some(n=>Math.hypot(n.x-y,n.y-c)<(n.r+s)*3.4)||d.push({x:y,y:c,r:s,iris:o.iris[Math.floor(l()*o.iris.length)],blinkAt:l()*5,blink:0,shut:0,tilt:(l()-.5)*.3,wx:0,wy:0})}}p();function k(t,e,i,s){let y=e.r*2.3;for(let c of[-1,1]){let f=e.x+c*y/2,r=e.y,n=Math.max(.02,1-s);if(t.save(),t.translate(f,r),t.rotate(e.tilt*c),o.style==="glow")t.shadowColor=o.sclera,t.shadowBlur=e.r*1.6,t.fillStyle=o.sclera,t.beginPath(),t.ellipse(0,0,e.r,e.r*.55*n,0,0,Math.PI*2),t.fill(),t.shadowBlur=0,t.fillStyle=e.iris,t.beginPath(),t.ellipse(e.wx*e.r*.4,e.wy*e.r*.25*n,e.r*.22,e.r*.4*n,0,0,Math.PI*2),t.fill();else if(o.style==="slit")t.shadowColor=o.sclera,t.shadowBlur=e.r*.8,t.fillStyle=o.sclera,t.beginPath(),t.ellipse(0,0,e.r,e.r*.82*n,0,0,Math.PI*2),t.fill(),t.shadowBlur=0,t.fillStyle=e.iris,t.beginPath(),t.ellipse(e.wx*e.r*.45,e.wy*e.r*.3*n,e.r*(.12+.1*i),e.r*.7*n,0,0,Math.PI*2),t.fill();else{t.fillStyle=o.sclera,t.beginPath(),t.ellipse(0,0,e.r,e.r*n,0,0,Math.PI*2),t.fill(),t.save(),t.beginPath(),t.ellipse(0,0,e.r,e.r*n,0,0,Math.PI*2),t.clip();let m=e.wx*e.r*.45,h=e.wy*e.r*.45;t.fillStyle=e.iris,t.beginPath(),t.arc(m,h,e.r*.5,0,Math.PI*2),t.fill(),t.fillStyle="#050505",t.beginPath(),t.arc(m,h,e.r*.26,0,Math.PI*2),t.fill(),t.fillStyle="rgba(255,255,255,.85)",t.beginPath(),t.arc(m-e.r*.14,h-e.r*.16,e.r*.1,0,Math.PI*2),t.fill(),t.fillStyle="rgba(0,0,0,.18)",t.fillRect(-e.r,-e.r,e.r*2,e.r*.3),t.restore()}t.restore()}}return{resize(){a.reset(),p()},frame(t,e){let i=a.g;a.reset(),i.fillStyle=o.bg,i.fillRect(0,0,a.w,a.h);let s=b.pointer.engaged,y=s?b.pointer.x:a.w/2+Math.sin(t*.5)*a.w*.35,c=s?b.pointer.y:a.h/2+Math.sin(t*.7+1)*a.h*.3;for(let r of d){let n=y-r.x,m=c-r.y,h=Math.hypot(n,m)||1,u=Math.min(1,h/(r.r*8)),P=n/h*u,x=m/h*u,M=e===0?1:Math.min(1,e*12);r.wx+=(P-r.wx)*M,r.wy+=(x-r.wy)*M,e>0&&t>r.blinkAt&&(r.blink=1,r.blinkAt=t+2+l()*6),r.blink=Math.max(0,r.blink-e*7);let S=o.shy&&s&&b.pointer.inside?1-Math.min(1,h/(r.r*5)):0;r.shut+=(Math.min(1,S*1.6)-r.shut)*(e===0?1:Math.min(1,e*10));let v=Math.max(Math.sin(r.blink*Math.PI),r.shut);k(i,r,u,v)}let f=i.createRadialGradient(a.w/2,a.h/2,Math.min(a.w,a.h)*.2,a.w/2,a.h/2,Math.max(a.w,a.h)*.7);f.addColorStop(0,w(o.bg,0)),f.addColorStop(1,w(o.bg,.55)),i.fillStyle=f,i.fillRect(0,0,a.w,a.h)}}}};export{A as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as M}from"./chunk-4ZBXB36L.js";import{f as g}from"./chunk-HXSSPN2I.js";import{a as v,f as d}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var P={id:"fireworks",name:"Fireworks",description:"A fireworks show over the harbour. Rockets climb, burst and crackle, and the finale spells out the error in sparks. Click to launch your own.",category:"Urban",kind:"2d",motion:"live",tags:["canvas","fireworks","celebration","night","particles","interactive","festive"],layout:"top",codeInScene:!0,copy:{eyebrow:"Grand finale",title:"Quite a show for a missing page.",message:"We went all out to say we couldn't find it. Click the sky to launch a few more.",actions:[{label:"Head home after the show",href:"/",variant:"primary"}]},params:{skyTop:"#02030c",skyBottom:"#141a3a",colors:["#ff4d6d","#ffd23f","#3bd6ff","#9b5cff","#ffffff","#3dff8a"],city:!0},theme:{bg:"#05071a",fg:"#f2f4ff",accent:"#ffd23f","accent-fg":"#05071a"},presetName:"Harbour",presets:{gold:{name:"Gold Rain",params:{colors:["#ffd36b","#fff2c9","#ffb347"]},theme:{accent:"#ffd36b"}},newyear:{name:"New Year",eyebrow:"Happy new page",title:"New year, same 404.",params:{colors:["#ffffff","#c0c0c0","#ffd36b"],skyBottom:"#1a1030"}},lantern:{name:"Lantern Festival",params:{colors:["#ff3b3b","#ffb000","#ff7a1f"],skyTop:"#0a0306",skyBottom:"#2a0a12"},theme:{bg:"#140508",accent:"#ffb000","accent-fg":"#140508"}}},setup(i){let s=i.params,t=M(i),n=i.random,y=[],m=[],p=new Float32Array(0),x=.4,k=3.2,b=[],w=()=>{let a=Math.min(t.w*.7,900),o=Math.min(a*.38,t.h*.32);p=d(i.copy.code||"404",{width:a,height:o,font:v,weight:800,fit:.95,step:9,random:n}).map((l,e)=>e%2?l+t.h*.5-o/2:l+(t.w-a)/2),b=Array.from({length:Math.ceil(t.w/14)},()=>20+n()*90)};w();let u=(a,o=!1)=>m.push({x:a,y:t.h*.86,vy:-t.h*.9,ty:o?t.h*.5:t.h*(.12+n()*.3),col:s.colors[Math.floor(n()*s.colors.length)],finale:o});i.on("pointerdown",a=>{a.target.closest("a,button")||u(i.pointer.x)});let S=a=>{if(a.finale){for(let l=0;l<p.length/2;l++){let e=n()*Math.PI*2;y.push({x:a.x,y:a.y,vx:Math.cos(e)*30,vy:Math.sin(e)*30,life:4.2,max:4.2,col:s.colors[l%s.colors.length],tx:p[l*2],ty:p[l*2+1]})}return}let o=90,r=t.h*(.25+n()*.15);for(let l=0;l<o;l++){let e=l/o*Math.PI*2,f=r*(.6+n()*.4);y.push({x:a.x,y:a.y,vx:Math.cos(e)*f,vy:Math.sin(e)*f,life:1.6+n()*.6,max:2.2,col:n()<.15?"#ffffff":a.col})}};return{resize(){t.reset(),w()},frame(a,o){let r=t.g;t.reset();let l=r.createLinearGradient(0,0,0,t.h);l.addColorStop(0,s.skyTop),l.addColorStop(1,s.skyBottom),r.globalAlpha=o>0?.28:1,r.fillStyle=l,r.fillRect(0,0,t.w,t.h),r.globalAlpha=1,o>0&&(a>x&&(x=a+.5+n()*.9,u(t.w*(.15+n()*.7))),a>k&&(k=a+11,u(t.w/2,!0))),r.globalCompositeOperation="lighter";for(let e of m)e.y+=e.vy*o,e.vy*=Math.exp(-.6*o),r.fillStyle=g(e.col,.9),r.fillRect(e.x-1.5,e.y,3,8),(e.y<=e.ty||e.vy>-60)&&(S(e),e.y=-1e9);m=m.filter(e=>e.y>-1e8);for(let e of y){e.tx!==void 0?e.life>1.2?(e.vx+=(e.tx-e.x)*5*o,e.vy+=(e.ty-e.y)*5*o,e.vx*=Math.exp(-4*o),e.vy*=Math.exp(-4*o)):e.vy+=t.h*.25*o:(e.vy+=t.h*.22*o,e.vx*=Math.exp(-1.2*o),e.vy*=Math.exp(-1.2*o)),e.x+=e.vx*o,e.y+=e.vy*o,e.life-=o;let f=Math.max(0,Math.min(1,e.life/(e.max*.5))),c=.7+.3*Math.sin(a*30+e.x);r.fillStyle=g(e.col,f*c),r.fillRect(e.x-1.3,e.y-1.3,2.6,2.6)}if(y=y.filter(e=>e.life>0&&e.y<t.h),r.globalCompositeOperation="source-over",s.city){let e=t.h*.88;r.fillStyle="#03040a",b.forEach((f,c)=>r.fillRect(c*14,e-f*(t.h/900),15,f*(t.h/900)+4)),r.fillRect(0,e,t.w,t.h-e),r.fillStyle="rgba(255,210,120,.5)",b.forEach((f,c)=>{for(let h=e-f*(t.h/900)+6;h<e-4;h+=9)(c*7+Math.floor(h))%5===0&&r.fillRect(c*14+4,h,3,3)}),r.fillStyle="rgba(255,255,255,.04)";for(let f=0;f<40;f++)r.fillRect((f*97+a*30)%t.w,e+6+f%8*6,30,1)}}}}};export{P as default};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import{a as A}from"./chunk-LMRCHEWX.js";import{a as x,b as k,c as M,h as T}from"./chunk-QJZBGT2Q.js";import{e as b}from"./chunk-HXSSPN2I.js";import{a as S}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var R=`
|
|
2
|
+
uniform sampler2D uArt;
|
|
3
|
+
uniform vec3 uWall, uPaint, uBeam;
|
|
4
|
+
uniform float uAmb, uRadius, uDust, uPaper, uFlick;
|
|
5
|
+
uniform vec2 uLight;
|
|
6
|
+
${x}
|
|
7
|
+
${k}
|
|
8
|
+
${M}
|
|
9
|
+
|
|
10
|
+
void main() {
|
|
11
|
+
vec2 fc = gl_FragCoord.xy;
|
|
12
|
+
vec2 uv = fc / uRes;
|
|
13
|
+
float asp = uRes.x / uRes.y;
|
|
14
|
+
vec2 p = vec2(uv.x * asp, uv.y);
|
|
15
|
+
vec2 L = vec2(uLight.x * asp, uLight.y);
|
|
16
|
+
|
|
17
|
+
// wall: plaster with stains, optional faded wallpaper stripes, skirting at the bottom
|
|
18
|
+
float plaster = fbm(p * 7.0) * 0.6 + vnoise(p * 60.0) * 0.4;
|
|
19
|
+
vec3 wall = uWall * (0.75 + 0.35 * plaster);
|
|
20
|
+
if (uPaper > 0.5) {
|
|
21
|
+
float stripe = smoothstep(0.45, 0.5, abs(fract(p.x * 9.0) - 0.5));
|
|
22
|
+
float motif = smoothstep(0.08, 0.0, abs(length(fract(p * vec2(9.0, 7.0)) - 0.5) - 0.18));
|
|
23
|
+
wall *= 1.0 - 0.12 * stripe - 0.08 * motif;
|
|
24
|
+
}
|
|
25
|
+
wall *= 1.0 - 0.35 * smoothstep(0.55, 0.9, fbm(p * 2.0 + 3.0));
|
|
26
|
+
float skirting = step(uv.y, 0.07);
|
|
27
|
+
wall = mix(wall, uWall * 0.45, skirting);
|
|
28
|
+
wall = mix(wall, uWall * 1.1, step(abs(uv.y - 0.07), 0.003));
|
|
29
|
+
|
|
30
|
+
// painted art (spray-painted code, doodles, a note)
|
|
31
|
+
vec4 art = texture(uArt, uv);
|
|
32
|
+
vec3 col = mix(wall, art.rgb, art.a);
|
|
33
|
+
|
|
34
|
+
// the beam: a soft cone with a hot centre and a ring, plus dust in the air
|
|
35
|
+
float d = length(p - L) / uRadius;
|
|
36
|
+
float flick = 0.92 + 0.08 * uFlick;
|
|
37
|
+
float beam = smoothstep(1.0, 0.0, d);
|
|
38
|
+
beam = beam * beam * (1.25 - 0.25 * smoothstep(0.0, 0.5, d)) + 0.18 * smoothstep(1.02, 0.95, d) * smoothstep(0.8, 0.95, d);
|
|
39
|
+
float spill = exp(-d * 1.4) * 0.08;
|
|
40
|
+
float dust = 0.0;
|
|
41
|
+
for (int i = 0; i < 3; i++) {
|
|
42
|
+
float fi = float(i);
|
|
43
|
+
vec2 q = p * (40.0 + fi * 25.0) + vec2(uTime * (0.3 + fi * 0.2), -uTime * (0.15 + fi * 0.1));
|
|
44
|
+
vec2 id = floor(q);
|
|
45
|
+
vec2 f = fract(q) - 0.5 - (hash22(id + fi) - 0.5) * 0.7;
|
|
46
|
+
dust += smoothstep(0.06, 0.0, length(f)) * step(0.93, hash12(id + fi * 9.0));
|
|
47
|
+
}
|
|
48
|
+
vec3 light = uBeam * (beam * 1.6 * flick + spill) + uAmb;
|
|
49
|
+
col *= light;
|
|
50
|
+
col += uBeam * dust * beam * uDust * 0.6;
|
|
51
|
+
// vignette and a touch of grain
|
|
52
|
+
col *= mix(0.6, 1.0, vignette(uv, 0.25));
|
|
53
|
+
col = toSRGB(aces(col));
|
|
54
|
+
col += grain(fc, uTime) * 0.025;
|
|
55
|
+
fragColor = vec4(col, 1.0);
|
|
56
|
+
}
|
|
57
|
+
`,F={id:"flashlight",name:"Flashlight",description:"A pitch-black room. Your cursor is the torch. Sweep the walls to find the spray-painted 404, the doodles and the note left behind.",category:"Spooky",kind:"2d",motion:"interactive",tags:["webgl","dark","flashlight","mouse","mystery","interactive"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Lights out",title:"It's dark in here.",message:"Move your cursor to look around. The page isn't here, but someone left a note.",actions:[{label:"Find the exit",href:"/",variant:"primary"}]},params:{wall:"#9a8f7e",paint:"#d92626",beam:"#fff1d6",ambient:.012,radius:.36,dust:1,wallpaper:!0},theme:{bg:"#050505",fg:"#e9e2d4",accent:"#fff1d6","accent-fg":"#140e05"},presetName:"Old Hallway",presets:{attic:{name:"Attic",eyebrow:"Mind your head",title:"Nothing up here but dust.",params:{wall:"#8a6a4a",paint:"#1a1a1a",beam:"#ffe0b0",wallpaper:!1,dust:1.6},theme:{accent:"#ffe0b0","accent-fg":"#1a0e00"}},hospital:{name:"Abandoned Ward",eyebrow:"Ward 404",title:"No one's been here in years.",params:{wall:"#a9b8a8",paint:"#3a5a8a",beam:"#e6f4ff",wallpaper:!1,ambient:.008},theme:{accent:"#e6f4ff","accent-fg":"#0a1420"}},cellar:{name:"Wine Cellar",params:{wall:"#6b4a3a",paint:"#e6c26b",beam:"#ffcf8a",radius:.3},theme:{accent:"#ffcf8a","accent-fg":"#1a0e00"}},basement:{name:"Basement",eyebrow:"Down here",title:"You found the basement. Not the page.",params:{wall:"#7d8288",paint:"#f2c12e",beam:"#e8f1ff",wallpaper:!1},theme:{accent:"#e8f1ff"}},crypt:{name:"Crypt",eyebrow:"Do not disturb",title:"Something lives here. Your page doesn't.",params:{wall:"#6b6152",paint:"#7a0e0e",beam:"#ffd9a0",ambient:.006,radius:.3,wallpaper:!1},theme:{accent:"#ffd9a0","accent-fg":"#1a0e00"}},uv:{name:"Blacklight",eyebrow:"UV only",title:"Hidden in plain sight. Still not found.",params:{wall:"#3a3550",paint:"#39ff14",beam:"#9d6bff",ambient:.02,dust:.4},theme:{accent:"#b48bff","accent-fg":"#12052a"}}},css:"& .lp-body{text-shadow:0 2px 16px #000}",setup(i){let r=i.params,c=document.createElement("canvas"),p=null,o,f=i.random;function v(){let a=Math.round(Math.min(2048,i.width*Math.min(2,i.dpr))),l=Math.round(a*i.height/i.width);c.width=a,c.height=l;let e=c.getContext("2d");e.clearRect(0,0,a,l);let t=a/1440,m=i.copy.code||"404",d=Math.min(a*.26,l*.38);e.font=`900 ${d}px ${S}`,e.textAlign="center",e.textBaseline="middle",e.fillStyle=r.paint,e.shadowColor=r.paint,e.shadowBlur=6*t,e.save(),e.translate(a*.5,l*.36),e.rotate(-.04),e.fillText(m,0,0),e.restore(),e.shadowBlur=0;for(let n=0;n<26;n++){let s=a*.5+(f()-.5)*d*m.length*.55,u=l*.36+d*(.15+f()*.2),y=(20+f()*90)*t;e.fillRect(s,u,3*t+f()*3*t,y),e.beginPath(),e.arc(s+2*t,u+y,3.5*t,0,Math.PI*2),e.fill()}for(let n=0;n<1600;n++){let s=f()*Math.PI*2,u=Math.pow(f(),.5)*d*1.6;e.globalAlpha=.5,e.fillRect(a*.5+Math.cos(s)*u*1.6,l*.36+Math.sin(s)*u*.6,1.5*t,1.5*t)}e.globalAlpha=1,e.strokeStyle="rgba(240,240,235,.85)",e.lineWidth=5*t,e.lineCap="round",e.beginPath(),e.moveTo(a*.78,l*.68),e.quadraticCurveTo(a*.86,l*.62,a*.93,l*.66),e.moveTo(a*.93,l*.66),e.lineTo(a*.905,l*.625),e.moveTo(a*.93,l*.66),e.lineTo(a*.9,l*.685),e.stroke(),e.font=`600 ${28*t}px "Comic Sans MS","Chalkboard SE","Marker Felt",cursive`,e.fillStyle="rgba(240,240,235,.85)",e.fillText("EXIT \u2192",a*.86,l*.74),e.save(),e.translate(a*.14,l*.64),e.rotate(-.08),e.fillStyle="#f7e36b",e.shadowColor="rgba(0,0,0,.4)",e.shadowBlur=10*t,e.shadowOffsetY=6*t,e.fillRect(-90*t,-90*t,180*t,180*t),e.shadowBlur=0,e.shadowOffsetY=0,e.fillStyle="#2b2b2b",e.font=`600 ${20*t}px "Marker Felt","Comic Sans MS",cursive`,e.textAlign="left",["the page","was here.","now it's","gone :("].forEach((n,s)=>e.fillText(n,-72*t,-52*t+s*32*t)),e.restore(),e.save(),e.translate(a*.83,l*.26),e.rotate(.05),e.strokeStyle="#5a3a1c",e.lineWidth=14*t,e.strokeRect(-80*t,-60*t,160*t,120*t),e.fillStyle="rgba(0,0,0,.25)",e.fillRect(-73*t,-53*t,146*t,106*t),e.fillStyle="rgba(240,240,235,.6)",e.font=`600 ${16*t}px ui-monospace,monospace`,e.textAlign="center",e.fillText("[ missing ]",0,4*t),e.restore(),e.fillStyle="#e9e4d8",e.fillRect(a*.04,l*.42,34*t,56*t),e.fillStyle="#b9b2a2",e.fillRect(a*.04+13*t,l*.42+14*t,8*t,26*t),p&&(o.bindTexture(o.TEXTURE_2D,p),o.pixelStorei(o.UNPACK_FLIP_Y_WEBGL,!0),o.texImage2D(o.TEXTURE_2D,0,o.RGBA,o.RGBA,o.UNSIGNED_BYTE,c),o.pixelStorei(o.UNPACK_FLIP_Y_WEBGL,!1))}let g=.3,w=.55,h=1;return{...A(i,{frag:R,init(a){o=a,v(),p=T(o,c,{filter:"linear"})},uniforms:(a,l)=>{let e,t;i.pointer.engaged?(e=i.pointer.x/i.width,t=1-i.pointer.y/i.height):i.reducedMotion?(e=.5,t=.5):(e=.5+Math.sin(a*.37)*.36+Math.sin(a*.91)*.06,t=.5+Math.sin(a*.53+1.3)*.22);let m=l===0?1:Math.min(1,l*9);return g+=(e-g)*m,w+=(t-w)*m,h=Math.random()<.03?.2:h+(1-h)*Math.min(1,l*20),{uArt:p,uWall:b(r.wall),uPaint:b(r.paint),uBeam:b(r.beam),uAmb:r.ambient,uRadius:r.radius,uDust:r.dust,uPaper:r.wallpaper?1:0,uFlick:h,uLight:[g,w]}}}),resize(){v()}}}};export{F as default};
|