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 @@
|
|
|
1
|
+
import{a as O,c as G,d as M,g as I}from"./chunk-JLRXT2AZ.js";import{a as C}from"./chunk-4ZBXB36L.js";import{f as v}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var D={id:"pong",name:"Table Tennis",description:"The original video game, playing itself while the error code glows behind the net. Move your mouse or press W and S to take the left paddle.",category:"Games",kind:"2d",motion:"game",tags:["canvas","game","playable","pong","retro","minimal"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Player 1, ready",title:"This link bounced.",message:"The page you were after was returned to sender. Grab the paddle or go back to the homepage.",actions:[{label:"Back to home",href:"/",variant:"primary"}]},params:{bg:"#0b0b0b",fg:"#f2f2f2",dim:"#262626",trail:!0},theme:{bg:"#0b0b0b",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#0b0b0b","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Classic",presets:{synth:{name:"Synthwave",params:{bg:"#12002a",fg:"#ff3bd4",dim:"#24064a",trail:!0},theme:{bg:"#12002a",fg:"#ffd6f7",accent:"#ff3bd4","accent-fg":"#fff"}},amber:{name:"Amber",params:{bg:"#0a0600",fg:"#ffb000",dim:"#1f1400",trail:!0},theme:{bg:"#0a0600",fg:"#ffe1a3",accent:"#ffb000","accent-fg":"#0a0600"}},ice:{name:"Ice Hockey",params:{bg:"#eaf6ff",fg:"#0b3a6b",dim:"#d4e8f8",trail:!1},theme:{bg:"#eaf6ff",fg:"#0b3a6b",accent:"#d6281a","accent-fg":"#fff"}},tennis:{name:"Clay Court",params:{bg:"#c4562a",fg:"#ffffff",dim:"#d46a3c",trail:!1},theme:{bg:"#c4562a",fg:"#fff",accent:"#fff","accent-fg":"#c4562a"}},table:{name:"Ping Pong Table",params:{bg:"#155e3b",fg:"#ffffff",dim:"#1c7149",trail:!1},theme:{bg:"#155e3b",accent:"#fff","accent-fg":"#155e3b"}},paper:{name:"Paper",params:{bg:"#f2efe8",fg:"#121212",dim:"#e2ddd2",trail:!1},theme:{bg:"#f2efe8",fg:"#121212",accent:"#121212","accent-fg":"#f2efe8"}},neon:{name:"Neon",params:{bg:"#08001a",fg:"#00f0ff",dim:"#1a0b3d",trail:!0},theme:{bg:"#08001a",fg:"#c9fbff",accent:"#00f0ff","accent-fg":"#08001a"}}},css:I,setup(o){let m=o.params,i=C(o),c=O(o,{pointerPlays:!0}),L=o.random,e={x:0,y:0,w:0,h:0},l=0,h=0,t=10,n=80,a={x:0,y:0,vx:0,vy:0},g=[],S=0,P=0,w=.8;function R(){e={x:Math.max(20,i.w*.06),y:Math.max(16,i.h*.05),w:i.w-2*Math.max(20,i.w*.06),h:i.h*.58},t=Math.max(8,e.w*.009),n=e.h*.18,l=h=e.y+e.h/2,u(1)}function u(y){a={x:e.x+e.w/2,y:e.y+e.h/2,vx:0,vy:0},w=.7;let r=e.w*.55,f=(L()-.5)*.9;a.vx=Math.cos(f)*r*y,a.vy=Math.sin(f)*r}return R(),{resize(){i.reset(),R()},frame(y,r){let f=i.g;if(i.reset(),(!o.reducedMotion||c.playing)&&r>0){let s=e.h*1.5,x=(b,p)=>b+Math.sign(p-b)*Math.min(Math.abs(p-b),s*r);c.playing?(c.up&&(l-=e.h*1.6*r),c.down&&(l+=e.h*1.6*r),o.pointer.inside&&!(c.up||c.down)&&(l+=(o.pointer.y-l)*Math.min(1,r*16))):l=x(l,a.vx<0?a.y+Math.sin(y)*n*.3:e.y+e.h/2),h=x(h,a.vx>0?a.y+Math.sin(y*1.3)*n*.35:e.y+e.h/2),l=Math.max(e.y+n/2,Math.min(e.y+e.h-n/2,l)),h=Math.max(e.y+n/2,Math.min(e.y+e.h-n/2,h)),w>0?w-=r:(a.x+=a.vx*r,a.y+=a.vy*r),(a.y<e.y+t/2||a.y>e.y+e.h-t/2)&&(a.vy*=-1,a.y=Math.max(e.y+t/2,Math.min(e.y+e.h-t/2,a.y)));let T=(b,p,k)=>{if(Math.abs(a.x-b)<t&&Math.abs(a.y-p)<n/2+t/2&&Math.sign(a.vx)===-k){let N=(a.y-p)/(n/2),E=Math.min(e.w*1.3,Math.hypot(a.vx,a.vy)*1.05),A=N*.85;a.vx=Math.cos(A)*E*k,a.vy=Math.sin(A)*E}};T(e.x+t*2,l,1),T(e.x+e.w-t*2,h,-1),a.x<e.x-20&&(P++,u(1)),a.x>e.x+e.w+20&&(S++,u(-1)),g.push({x:a.x,y:a.y}),g.length>14&&g.shift()}f.fillStyle=m.bg,f.fillRect(0,0,i.w,i.h),f.fillStyle=m.dim,f.font=`900 ${e.h*.62}px ${G}`,f.textAlign="center",f.textBaseline="middle",f.fillText(o.copy.code,e.x+e.w/2,e.y+e.h/2),f.fillStyle=m.fg;for(let s=e.y;s<e.y+e.h;s+=t*2.4)f.fillRect(e.x+e.w/2-t/4,s,t/2,t*1.2);f.fillRect(e.x,e.y-t/2,e.w,t/2),f.fillRect(e.x,e.y+e.h,e.w,t/2),f.fillRect(e.x+t*1.5,l-n/2,t,n),f.fillRect(e.x+e.w-t*2.5,h-n/2,t,n),m.trail&&g.forEach((s,x)=>{f.fillStyle=v(m.fg,x/g.length*.35),f.fillRect(s.x-t/2,s.y-t/2,t,t)}),f.fillStyle=m.fg,f.fillRect(a.x-t/2,a.y-t/2,t,t);let d=Math.max(18,Math.min(42,e.w/22));M(f,String(S),e.x+e.w/2-d*2,e.y+14,d,m.fg,"center"),M(f,String(P),e.x+e.w/2+d*2,e.y+14,d,m.fg,"center"),!c.playing&&Math.floor(y*1.6)%2===0&&M(f,"DEMO \xB7 MOVE TO PLAY",e.x+e.w/2,e.y+e.h+16,Math.max(10,Math.min(14,i.w/90)),v(m.fg,.7),"center")}}}};export{D as default};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{a as M}from"./chunk-4ZBXB36L.js";import{f as s}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var S={id:"radar",name:"Radar Sweep",description:"A phosphor radar scope sweeps for the missing page. Blips flare up and fade, and the target never shows.",category:"Retro Tech",kind:"2d",motion:"live",tags:["canvas","radar","military","scope","green","search","dark"],layout:"right",codeInScene:!1,copy:{eyebrow:"Scanning\u2026",title:"No contact.",message:"We swept every sector for this page and got nothing back. Returning to base is advised.",actions:[{label:"Return to base",href:"/",variant:"primary"},{label:"Request support",href:"/contact",variant:"secondary"}]},params:{bg:"#020a05",phosphor:"#3dff8a",period:4,mode:"radar"},theme:{bg:"#020a05",fg:"#c9ffdc",accent:"#3dff8a","accent-fg":"#02140a","font-display":"var(--lp-font-mono)","title-weight":"600","code-color":"rgba(61,255,138,.85)"},presetName:"Air Defence",presets:{red:{name:"Red Alert",eyebrow:"Threat level: 404",params:{bg:"#0a0202",phosphor:"#ff3b3b"},theme:{bg:"#0a0202",fg:"#ffd6d6",accent:"#ff3b3b","accent-fg":"#0a0202","code-color":"rgba(255,59,59,.85)"}},weather:{name:"Weather Radar",eyebrow:"Doppler scan",title:"Clear skies. No page.",params:{bg:"#06121f",phosphor:"#5aff9a",period:6,mode:"radar"},theme:{bg:"#06121f",accent:"#5aff9a","accent-fg":"#06121f"}},sonar:{name:"Sonar",eyebrow:"Pinging\u2026",title:"Nothing in these waters.",params:{bg:"#010814",phosphor:"#3bd6ff",period:5,mode:"sonar"},theme:{bg:"#010814",fg:"#cdf3ff",accent:"#3bd6ff","accent-fg":"#011221","code-color":"rgba(59,214,255,.85)"}},amber:{name:"Air Traffic",eyebrow:"Tower to page\u2026",title:"Lost on approach.",params:{bg:"#0a0600",phosphor:"#ffb000",period:5},theme:{bg:"#0a0600",fg:"#ffe1a3",accent:"#ffb000","accent-fg":"#0a0600","code-color":"rgba(255,176,0,.85)"}}},css:`& .lp-overlay{padding-right:clamp(24px,8cqw,140px)}
|
|
2
|
+
& .lp-code{--lp-code-size:clamp(70px,9cqw,130px);font-family:var(--lp-font-mono);letter-spacing:-.02em;text-shadow:0 0 22px currentColor}
|
|
3
|
+
& .lp-head,& .lp-body{max-width:min(440px,40cqw)}
|
|
4
|
+
@container (max-width:760px){& .lp-head,& .lp-body{max-width:none}& .lp-overlay{justify-content:flex-end}}`,setup(p){let r=p.params,l=M(p),c=p.random,f=[],y=0;return{resize(){l.reset()},frame(g,w){let e=l.g;l.reset();let m=l.w<760,o=m?Math.min(l.w*.42,l.h*.3):Math.min(l.h*.42,l.w*.3),n=m?l.w/2:l.w*.33,i=m?l.h*.32:l.h/2,d=g/r.period*Math.PI*2%(Math.PI*2);e.fillStyle=r.bg,e.fillRect(0,0,l.w,l.h);let b=e.createRadialGradient(n,i,0,n,i,o);b.addColorStop(0,s(r.phosphor,.08)),b.addColorStop(1,s(r.phosphor,.02)),e.fillStyle=b,e.beginPath(),e.arc(n,i,o,0,Math.PI*2),e.fill(),e.strokeStyle=s(r.phosphor,.28),e.lineWidth=1;for(let a=1;a<=4;a++)e.beginPath(),e.arc(n,i,o*a/4,0,Math.PI*2),e.stroke();for(let a=0;a<12;a++){let t=a/12*Math.PI*2;e.beginPath(),e.moveTo(n+Math.cos(t)*o*.08,i+Math.sin(t)*o*.08),e.lineTo(n+Math.cos(t)*o,i+Math.sin(t)*o),e.stroke()}for(let a=0;a<72;a++){let t=a/72*Math.PI*2,h=a%6===0?.94:.97;e.beginPath(),e.moveTo(n+Math.cos(t)*o*h,i+Math.sin(t)*o*h),e.lineTo(n+Math.cos(t)*o,i+Math.sin(t)*o),e.stroke()}if(r.mode==="radar"){for(let a=0;a<40;a++){let t=d-a/40*1.2;e.fillStyle=s(r.phosphor,(1-a/40)*.14),e.beginPath(),e.moveTo(n,i),e.arc(n,i,o,t-.03,t),e.closePath(),e.fill()}e.strokeStyle=s(r.phosphor,.95),e.lineWidth=2,e.beginPath(),e.moveTo(n,i),e.lineTo(n+Math.cos(d)*o,i+Math.sin(d)*o),e.stroke()}else{let a=g%r.period/r.period;for(let t=0;t<3;t++){let h=(a+t/3)%1;e.strokeStyle=s(r.phosphor,(1-h)*.8),e.lineWidth=2,e.beginPath(),e.arc(n,i,o*h,0,Math.PI*2),e.stroke()}}w>0&&g-y>.35&&(y=g,c()<.55&&f.push({a:d+(r.mode==="radar"?-.05:c()*6.28),r:.2+c()*.75,life:1,label:c()<.18?["/page?","unknown",p.copy.code,"no IFF"][Math.floor(c()*4)]:void 0}));for(let a of f){if(a.life-=w/(r.period*.9),a.life<=0)continue;let t=n+Math.cos(a.a)*a.r*o,h=i+Math.sin(a.a)*a.r*o;e.fillStyle=s(r.phosphor,a.life),e.shadowColor=r.phosphor,e.shadowBlur=10*a.life,e.beginPath(),e.arc(t,h,3.2,0,Math.PI*2),e.fill(),e.shadowBlur=0,a.label&&(e.font="600 11px ui-monospace,Menlo,monospace",e.fillText(a.label,t+8,h-6))}for(;f.length&&f[0].life<=0;)f.shift();e.fillStyle=r.phosphor,e.beginPath(),e.arc(n,i,3,0,Math.PI*2),e.fill(),e.font="600 12px ui-monospace,Menlo,monospace",e.fillStyle=s(r.phosphor,.8),e.textAlign="left",e.fillText(`BRG ${String(Math.floor((d*180/Math.PI+90)%360)).padStart(3,"0")}\xB0`,n-o,i+o+26),e.textAlign="right",e.fillText(`TARGET: ${p.copy.code} \xB7 NOT ACQUIRED`,n+o,i+o+26),e.fillStyle="rgba(0,0,0,.18)";for(let a=0;a<l.h;a+=3)e.fillRect(0,a,l.w,1)}}}};export{S as default};
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import{a as g,b as m,c as b,e as w,f as T,h as k,k as p}from"./chunk-QJZBGT2Q.js";import{e as r}from"./chunk-HXSSPN2I.js";import{a as y,e as x}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var B=`
|
|
2
|
+
uniform sampler2D uText;
|
|
3
|
+
uniform vec3 uSkyTop, uSkyBottom, uNeon, uL0, uL1, uL2, uL3;
|
|
4
|
+
${g}
|
|
5
|
+
${m}
|
|
6
|
+
|
|
7
|
+
vec3 pal(float h) { return h < 0.25 ? uL0 : h < 0.5 ? uL1 : h < 0.75 ? uL2 : uL3; }
|
|
8
|
+
|
|
9
|
+
void main() {
|
|
10
|
+
vec2 uv = gl_FragCoord.xy / uRes;
|
|
11
|
+
vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y + uMouse * 0.02;
|
|
12
|
+
float t = uTime;
|
|
13
|
+
vec3 col = mix(uSkyBottom, uSkyTop, smoothstep(-0.5, 0.6, p.y));
|
|
14
|
+
// building silhouettes with lit windows
|
|
15
|
+
float bx = floor((p.x + 2.0) * 6.0);
|
|
16
|
+
float bh = -0.05 + hash11(bx) * 0.35;
|
|
17
|
+
if (p.y < bh) {
|
|
18
|
+
col = uSkyBottom * 0.35;
|
|
19
|
+
vec2 wq = vec2(fract((p.x + 2.0) * 60.0), fract(p.y * 50.0));
|
|
20
|
+
vec2 wid = floor(vec2((p.x + 2.0) * 60.0, p.y * 50.0));
|
|
21
|
+
float on = step(0.62, hash12(wid)) * step(0.2, wq.x) * step(wq.x, 0.8) * step(0.25, wq.y) * step(wq.y, 0.75);
|
|
22
|
+
col += pal(hash12(wid + 3.0)) * on * 0.7;
|
|
23
|
+
}
|
|
24
|
+
// bokeh street lights and traffic
|
|
25
|
+
for (int i = 0; i < 46; i++) {
|
|
26
|
+
float fi = float(i);
|
|
27
|
+
vec2 c = vec2((hash11(fi * 1.7) - 0.5) * 2.4, -0.45 + hash11(fi * 3.1) * 0.75);
|
|
28
|
+
if (i > 30) c.x = mod(c.x + t * (0.05 + hash11(fi) * 0.1) * (hash11(fi + 5.0) > 0.5 ? 1.0 : -1.0) + 1.2, 2.4) - 1.2, c.y = -0.4 + hash11(fi * 7.0) * 0.08;
|
|
29
|
+
float r = 0.012 + hash11(fi * 5.3) * 0.03;
|
|
30
|
+
float d = length(p - c);
|
|
31
|
+
float tw = 0.75 + 0.25 * sin(t * (0.5 + hash11(fi)) + fi);
|
|
32
|
+
col += pal(hash11(fi * 9.7)) * smoothstep(r, r * 0.6, d) * 1.4 * tw;
|
|
33
|
+
col += pal(hash11(fi * 9.7)) * exp(-d / (r * 3.0)) * 0.12;
|
|
34
|
+
}
|
|
35
|
+
// neon sign with the code
|
|
36
|
+
float a = texture(uText, uv).a;
|
|
37
|
+
float flicker = 0.9 + 0.1 * step(0.15, fract(sin(floor(t * 9.0)) * 43758.5));
|
|
38
|
+
col += uNeon * a * 2.6 * flicker;
|
|
39
|
+
col += uNeon * textureLod(uText, uv, 4.0).a * 1.3 * flicker;
|
|
40
|
+
col += uNeon * textureLod(uText, uv, 6.0).a * 0.8 * flicker;
|
|
41
|
+
fragColor = vec4(col, 1.0);
|
|
42
|
+
}
|
|
43
|
+
`,S=`
|
|
44
|
+
uniform sampler2D uBg;
|
|
45
|
+
uniform float uFog, uRain, uMaxLod;
|
|
46
|
+
${g}
|
|
47
|
+
${m}
|
|
48
|
+
${b}
|
|
49
|
+
|
|
50
|
+
// a sliding drop per cell, with a trail of tiny droplets above it
|
|
51
|
+
vec4 sliding(vec2 uv, float t, float scale, float seed) {
|
|
52
|
+
vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
|
|
53
|
+
vec2 g = uv * aspect * scale * vec2(1.0, 0.25);
|
|
54
|
+
vec2 id = floor(g);
|
|
55
|
+
vec2 f = fract(g);
|
|
56
|
+
float h = hash12(id + seed);
|
|
57
|
+
if (h > uRain) return vec4(0.0);
|
|
58
|
+
float speed = 0.06 + h * 0.08;
|
|
59
|
+
float ph = fract(t * speed + h * 7.0);
|
|
60
|
+
// stick-slip: mostly waiting, then a quick slide
|
|
61
|
+
float y = 1.0 - (ph + 0.05 * sin(ph * 40.0) * (1.0 - ph));
|
|
62
|
+
float x = 0.5 + (hash12(id + 2.0 + seed) - 0.5) * 0.6 + sin(y * 9.0 + h * 6.0) * 0.06;
|
|
63
|
+
vec2 d = (f - vec2(x, y)) * vec2(1.0, 4.0);
|
|
64
|
+
float r = 0.14 + h * 0.08;
|
|
65
|
+
float drop = smoothstep(r, r * 0.75, length(d * vec2(1.0, 0.85)));
|
|
66
|
+
// trail
|
|
67
|
+
float trailX = smoothstep(0.06, 0.0, abs(f.x - x));
|
|
68
|
+
float trail = trailX * step(y, f.y) * smoothstep(1.0, y, f.y);
|
|
69
|
+
float dots = smoothstep(0.08, 0.04, length(vec2(f.x - x, (fract(f.y * 14.0) - 0.5) / 14.0 * 4.0))) * trail;
|
|
70
|
+
vec2 off = d / r * drop * 0.6 + vec2(f.x - x, 0.0) * dots * 0.5;
|
|
71
|
+
return vec4(off, drop + dots * 0.6, trail);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// tiny static droplets that appear and evaporate
|
|
75
|
+
vec3 statics(vec2 uv, float t) {
|
|
76
|
+
vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
|
|
77
|
+
vec2 g = uv * aspect * 38.0;
|
|
78
|
+
vec2 id = floor(g);
|
|
79
|
+
vec2 f = fract(g) - 0.5;
|
|
80
|
+
vec2 j = (hash22(id) - 0.5) * 0.6;
|
|
81
|
+
float h = hash12(id + 9.0);
|
|
82
|
+
float life = sin(fract(t * 0.08 + h) * 3.14159);
|
|
83
|
+
float r = (0.12 + h * 0.18) * life * step(0.3, h);
|
|
84
|
+
vec2 d = f - j;
|
|
85
|
+
float m = smoothstep(r, r * 0.7, length(d));
|
|
86
|
+
return vec3(d / max(r, 1e-3) * m * 0.35, m);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
void main() {
|
|
90
|
+
vec2 fc = gl_FragCoord.xy;
|
|
91
|
+
vec2 uv = fc / uRes;
|
|
92
|
+
float t = uTime;
|
|
93
|
+
vec3 s = statics(uv, t);
|
|
94
|
+
vec4 a = sliding(uv, t, 3.5, 0.0);
|
|
95
|
+
vec4 b = sliding(uv, t * 1.1 + 13.0, 6.0, 4.0);
|
|
96
|
+
float mask = clamp(s.z + a.z + b.z, 0.0, 1.0);
|
|
97
|
+
vec2 off = s.xy + a.xy + b.xy;
|
|
98
|
+
float trail = clamp(a.w + b.w, 0.0, 1.0);
|
|
99
|
+
float fogLod = mix(1.0, uMaxLod, uFog);
|
|
100
|
+
float lod = mix(fogLod, 0.4, mask);
|
|
101
|
+
lod = mix(lod, fogLod * 0.55, trail * (1.0 - mask));
|
|
102
|
+
// drops act like tiny lenses: they flip and magnify what's behind
|
|
103
|
+
vec2 suv = uv - off * 0.05 * (1.0 + mask);
|
|
104
|
+
vec3 col = textureLod(uBg, suv, lod).rgb;
|
|
105
|
+
// fogged glass scatters light: lift the blacks a little
|
|
106
|
+
col = mix(col, col * 0.8 + vec3(0.03, 0.035, 0.05), uFog * (1.0 - mask) * 0.6);
|
|
107
|
+
// highlight on drop tops
|
|
108
|
+
col += vec3(0.6) * mask * smoothstep(0.2, 0.6, -off.y) * 0.25;
|
|
109
|
+
col = toSRGB(aces(col));
|
|
110
|
+
col *= mix(0.7, 1.0, vignette(uv, 0.25));
|
|
111
|
+
col += grain(fc, t) * 0.02;
|
|
112
|
+
fragColor = vec4(col, 1.0);
|
|
113
|
+
}
|
|
114
|
+
`,P={id:"rainy-window",name:"Rainy Window",description:"Rain runs down a fogged window. Behind it, a city at night and a neon sign showing the error, blurred until a drop rolls past and brings it into focus.",category:"Urban",kind:"2d",motion:"live",tags:["webgl","rain","city","night","neon","bokeh","moody","cinematic"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Rainy night",title:"Nothing out there but rain.",message:"The page you're looking for isn't on this street. Come in from the cold.",actions:[{label:"Head inside",href:"/",variant:"primary"}]},params:{skyTop:"#0a0f1f",skyBottom:"#1a1630",neon:"#ff2d6f",lights:["#ffb35c","#ff5f4a","#5fb7ff","#9dff8a"],fog:.8,rain:.55},theme:{bg:"#0d0f1c",fg:"#f2eef8",accent:"#ff2d6f","accent-fg":"#fff"},presetName:"Neon Night",presets:{green:{name:"Diner Green",params:{neon:"#3dff9a",lights:["#ffe2a8","#3dff9a","#ff6b6b","#ffffff"],skyTop:"#04120c",skyBottom:"#0d2a1f"},theme:{bg:"#06160f",accent:"#3dff9a","accent-fg":"#04120c"}},tokyo:{name:"Tokyo",params:{neon:"#ff2a3d",lights:["#ff2a3d","#ffffff","#ffd23f","#3bd6ff"],skyTop:"#070712",skyBottom:"#1a0f2a",rain:.7},theme:{bg:"#0d0a1a",accent:"#ff2a3d","accent-fg":"#fff"}},blue:{name:"Blue Hour",params:{skyTop:"#14254a",skyBottom:"#2a3a6a",neon:"#4dd8ff",lights:["#ffe2a8","#ffd27a","#9cc8ff","#ffffff"],fog:.65},theme:{bg:"#162448",accent:"#4dd8ff","accent-fg":"#071830"}},amber:{name:"Amber Caf\xE9",eyebrow:"Closed for the night",title:"The caf\xE9's shut. So is this page.",params:{skyTop:"#120b06",skyBottom:"#2a170b",neon:"#ffb347",lights:["#ffcf8a","#ff9a4a","#ffe7c2","#ff7a3d"],fog:.85},theme:{bg:"#1a0f07",accent:"#ffb347","accent-fg":"#1a0f07"}},storm:{name:"Downpour",params:{rain:.85,fog:.9,neon:"#a66bff"},theme:{accent:"#a66bff"}}},css:"& .lp-body{text-shadow:0 2px 18px rgba(0,0,0,.6)}",setup(o){let i=o.params,c=o.canvas({adaptive:!0}),t=w(c),L=p(t,B),R=p(t,S),h=.5,e=T(t,2,2),E=()=>{t.bindTexture(t.TEXTURE_2D,e.tex),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR_MIPMAP_LINEAR)},n=document.createElement("canvas"),l,v=()=>{let f=Math.max(64,Math.round(1024*o.height/Math.max(1,o.width)));n.width=1024,n.height=f;let s=n.getContext("2d");s.clearRect(0,0,1024,f),s.save(),s.translate(1024*.06,f*.4-f*.17),s.lineJoin="round",x(s,o.copy.code||"404",{width:1024*.88,height:f*.34,font:y,weight:300,fit:.7}),s.restore(),l&&(t.bindTexture(t.TEXTURE_2D,l),t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,!0),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,n),t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,!1),t.generateMipmap(t.TEXTURE_2D))};v(),l=k(t,n,{filter:"mipmap"});let a=i.lights.map(r),d=()=>{e.resize(c.width*h,c.height*h),E(),v()};return d(),{resize:d,frame(u){e.width!==Math.max(1,Math.round(c.width*h))&&d(),L.draw({uTime:u,uMouse:[o.pointer.sx,o.pointer.sy],uText:l,uSkyTop:r(i.skyTop),uSkyBottom:r(i.skyBottom),uNeon:r(i.neon),uL0:a[0],uL1:a[1%a.length],uL2:a[2%a.length],uL3:a[3%a.length]},e),t.bindTexture(t.TEXTURE_2D,e.tex),t.generateMipmap(t.TEXTURE_2D);let f=Math.log2(Math.max(e.width,e.height))-3;R.draw({uTime:u,uBg:e,uFog:i.fog,uRain:i.rain,uMaxLod:Math.min(5.5,f)})}}}};export{P as default};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var e=p=>p.replace(/[&<>"]/g,o=>({"&":"&","<":"<",">":">",'"':"""})[o]),g={id:"receipt",name:"Receipt",description:"A thermal printer chatters out a receipt for your visit, itemised down to the missing page, with a total of 404 and a barcode at the bottom.",category:"Paper & Print",kind:"2d",motion:"live",tags:["dom","receipt","print","funny","light","retail","monospace"],layout:"none",copy:{title:"Item not found",message:"No charge. Please visit the homepage for our full range.",actions:[{label:"Continue shopping",href:"/",variant:"primary"}]},params:{desk:"#e7e2d8",paper:"#ffffff",ink:"#222222",store:"THE INTERNET CO."},theme:{bg:"#e7e2d8",fg:"#222"},presetName:"Corner Shop",presets:{dark:{name:"Night Counter",params:{desk:"#1a1d24",paper:"#f7f5ef",ink:"#1a1a1a"},theme:{bg:"#1a1d24"}},cafe:{name:"Caf\xE9",params:{desk:"#c9a27a",paper:"#fffaf0",ink:"#3a2412",store:"CAF\xC9 404"},theme:{bg:"#c9a27a"}},pink:{name:"Boutique",params:{desk:"#ffd6e5",paper:"#ffffff",ink:"#5a1030",store:"BOUTIQUE LOST"},theme:{bg:"#ffd6e5"}}},css:`
|
|
2
|
+
& .rc{position:absolute;inset:0;display:flex;justify-content:center;background:var(--desk);overflow:hidden}
|
|
3
|
+
& .rc-printer{position:absolute;top:0;width:min(400px,86cqw);height:64px;background:linear-gradient(180deg,#3a3d44,#22252b);border-radius:0 0 14px 14px;box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:2}
|
|
4
|
+
& .rc-printer::after{content:"";position:absolute;left:8%;right:8%;bottom:10px;height:6px;border-radius:3px;background:#0b0c0f}
|
|
5
|
+
& .rc-printer i{position:absolute;right:16px;top:14px;width:8px;height:8px;border-radius:50%;background:#3dff7a;box-shadow:0 0 8px #3dff7a}
|
|
6
|
+
& .rc-paper{position:absolute;top:58px;width:min(320px,74cqw);background:var(--paper);color:var(--ink);padding:26px 22px 40px;font:13px/1.55 "Courier Prime","Courier New",ui-monospace,monospace;
|
|
7
|
+
box-shadow:0 18px 30px -18px rgba(0,0,0,.45);transform-origin:50% 0;
|
|
8
|
+
-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/16px 10px repeat-x;
|
|
9
|
+
mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/16px 10px repeat-x}
|
|
10
|
+
& .rc-paper h1{font:inherit;font-weight:700;text-align:center;margin:0;letter-spacing:.08em}
|
|
11
|
+
& .rc-paper .c{text-align:center}
|
|
12
|
+
& .rc-paper .row{display:flex;justify-content:space-between;gap:10px}
|
|
13
|
+
& .rc-paper .row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
14
|
+
& .rc-paper hr{border:0;border-top:1px dashed currentColor;margin:10px 0;opacity:.6}
|
|
15
|
+
& .rc-paper .tot{font-weight:700;font-size:1.25em}
|
|
16
|
+
& .rc-paper .bar{height:46px;margin:14px 0 4px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 3px,var(--ink) 3px 4px,transparent 4px 7px,var(--ink) 7px 10px,transparent 10px 11px)}
|
|
17
|
+
& .rc-paper a{color:var(--ink);font-weight:700}
|
|
18
|
+
& .rc-paper .void{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-14deg);border:4px solid #d62828;color:#d62828;font:900 34px/1 var(--lp-font);padding:6px 14px;letter-spacing:.1em;opacity:0;transition:opacity .3s}
|
|
19
|
+
& .rc-paper.done .void{opacity:.8}
|
|
20
|
+
`,setup(p){let o=p.params,a=p.copy,c=typeof location<"u"?location.pathname:"/missing",d=new Date,r=document.createElement("div");r.className="rc",r.style.setProperty("--desk",o.desk),r.style.setProperty("--paper",o.paper),r.style.setProperty("--ink",o.ink),r.innerHTML=`<div class="rc-printer" aria-hidden="true"><i></i></div><div class="rc-paper">
|
|
21
|
+
<h1><span class="lp-sr">Error ${e(a.code)}: </span>${e(o.store)}</h1>
|
|
22
|
+
<div class="c">${e(d.toLocaleDateString())} ${e(d.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}))}<br>TERMINAL ${e(a.code)} \xB7 CASHIER: SERVER</div><hr>
|
|
23
|
+
<div class="row"><span>1 \xD7 PAGE ${e(c)}</span><span>\u2014</span></div>
|
|
24
|
+
<div class="row"><span> STATUS</span><span>NOT FOUND</span></div>
|
|
25
|
+
<div class="row"><span>1 \xD7 LOOKING AROUND</span><span>0.00</span></div>
|
|
26
|
+
<div class="row"><span>1 \xD7 MILD CONFUSION</span><span>0.00</span></div><hr>
|
|
27
|
+
<div class="row tot"><span>TOTAL</span><span>${e(a.code)}</span></div>
|
|
28
|
+
<div class="row"><span>PAID</span><span>NOTHING</span></div><hr>
|
|
29
|
+
<div class="c">${e(a.title.toUpperCase())}<br>${e(a.message)}</div>
|
|
30
|
+
<div class="bar" aria-hidden="true"></div><div class="c">* ${e(a.code)} ${e(a.code)} ${e(a.code)} *</div><hr>
|
|
31
|
+
<div class="c">${a.actions.map(t=>`<a href="${e(t.href??"/")}">${e(t.label)} \u2192</a>`).join("<br>")}</div>
|
|
32
|
+
<div class="void" aria-hidden="true">VOID</div></div>`,p.root.append(r),r.querySelectorAll("a").forEach(t=>t.addEventListener("click",i=>{i.metaKey||i.ctrlKey||(i.preventDefault(),p.navigate(t.getAttribute("href"),i))}));let s=r.querySelector(".rc-paper");return{frame(t){let i=s.offsetHeight,n=p.reducedMotion?1:Math.min(1,t/3.4),l=Math.floor(n*40)/40;s.style.transform=`translateY(${-(1-l)*i}px) rotate(${(1-n)*0+Math.sin(t*.8)*.4*n}deg)`,s.classList.toggle("done",n>=1)},destroy(){r.remove()}}}};export{g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as z}from"./chunk-4ZBXB36L.js";import{f as C}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var W={id:"road-closed",name:"Road Closed",description:"A road stretches to the horizon and ends at a striped barrier, cones and blinking warning lamps. The detour sign points home.",category:"Urban",kind:"2d",motion:"live",tags:["canvas","road","construction","barrier","sign","detour","warning"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Detour ahead",title:"Road closed.",message:"This route to the page has been closed. Please follow the detour back to the homepage.",actions:[{label:"Follow the detour",href:"/",variant:"primary"}]},params:{sky:"#9fd0ff",sky2:"#f2f6fa",road:"#3a3d42",stripe:"#f2f2f2",night:!1},theme:{bg:"#d9e4ec",fg:"#ffffff",accent:"#ff7a00","accent-fg":"#fff","code-color":"rgba(20,24,29,.14)"},presetName:"Daytime",presets:{snow:{name:"Snowed In",eyebrow:"Winter closure",title:"Pass closed for the season.",params:{sky:"#b9c8d8",sky2:"#eef3f7",road:"#5a6070",stripe:"#ffffff"},theme:{bg:"#eef3f7"}},night:{name:"Night Works",params:{sky:"#050912",sky2:"#1a2234",road:"#1d2026",stripe:"#d9d9d9",night:!0},theme:{bg:"#0b111c",fg:"#f2f2f2",accent:"#ffb000","accent-fg":"#000","code-color":"rgba(242,242,242,.1)"}},desert:{name:"Desert Highway",params:{sky:"#ffb38a",sky2:"#ffe6c7",road:"#4a3f3a",stripe:"#ffd23f"},theme:{bg:"#f2c49a",fg:"#2a160a",accent:"#2a160a","accent-fg":"#fff"}}},css:"& .lp-body{text-shadow:0 2px 14px rgba(0,0,0,.55)}& .lp-message{color:rgba(255,255,255,.85)}",setup(y){let b=y.params,p=z(y);return{resize(){p.reset()},frame(u){let e=p.g;p.reset();let f=p.w,g=p.h,r=g*.44,S=e.createLinearGradient(0,0,0,r);S.addColorStop(0,b.sky),S.addColorStop(1,b.sky2),e.fillStyle=S,e.fillRect(0,0,f,r),e.fillStyle=b.night?"#0b1410":"#8fb86a",e.fillRect(0,r,f,g-r);let s=f/2+y.pointer.sx*f*.03;e.fillStyle=b.road,e.beginPath(),e.moveTo(s-4,r),e.lineTo(s+4,r),e.lineTo(f*.92,g),e.lineTo(f*.08,g),e.closePath(),e.fill(),e.fillStyle=b.stripe;let w=u*.6%1;for(let o=0;o<14;o++){let l=(o+w)/14,t=(o+w+.45)/14,m=r+(g-r)*l*l,R=r+(g-r)*t*t,x=2+l*l*14,A=2+t*t*14;e.beginPath(),e.moveTo(s-x/2+(f/2-s)*l*l,m),e.lineTo(s+x/2+(f/2-s)*l*l,m),e.lineTo(s+A/2+(f/2-s)*t*t,R),e.lineTo(s-A/2+(f/2-s)*t*t,R),e.fill()}let i=g*.5,n=Math.min(f*.7,820),c=f/2-n/2,a=n*.12;e.fillStyle="#555";for(let o of[c+n*.08,c+n*.92])e.fillRect(o-5,i,10,a*2.4);e.save(),e.beginPath(),e.rect(c,i,n,a),e.clip(),e.fillStyle="#ffffff",e.fillRect(c,i,n,a),e.fillStyle="#e3262f";for(let o=c-a*2;o<c+n+a;o+=a*1.2)e.beginPath(),e.moveTo(o,i+a),e.lineTo(o+a*.6,i+a),e.lineTo(o+a*1.6,i),e.lineTo(o+a,i),e.closePath(),e.fill();e.restore();let k=n*.46,T=a*1.6;e.fillStyle="#ffffff",e.beginPath(),e.roundRect(f/2-k/2,i-T-8,k,T,8),e.fill(),e.strokeStyle="#e3262f",e.lineWidth=6,e.stroke(),e.fillStyle="#14181d";let P=`${y.copy.code} \xB7 CLOSED`;e.font='900 100px "Arial Black",Inter,Arial,sans-serif';let B=Math.min(T*.5,100*k*.86/e.measureText(P).width);e.font=`900 ${B}px "Arial Black",Inter,Arial,sans-serif`,e.textAlign="center",e.textBaseline="middle",e.fillText(P,f/2,i-T/2-8);let I=Math.floor(u*1.6)%2===0;for(let[o,l]of[c+n*.08,c+n*.92].entries()){let t=o===0===I;if(e.fillStyle=t?"#ffb000":"#6b4a00",t&&(e.shadowColor="#ffb000",e.shadowBlur=30),e.beginPath(),e.arc(l,i-16,12,0,Math.PI*2),e.fill(),e.shadowBlur=0,t&&b.night){let m=e.createRadialGradient(l,i-16,0,l,i-16,200);m.addColorStop(0,"rgba(255,176,0,.35)"),m.addColorStop(1,"rgba(255,176,0,0)"),e.fillStyle=m,e.fillRect(l-200,i-216,400,400)}}let v=(o,l,t)=>{e.fillStyle="#ff6a00",e.beginPath(),e.moveTo(o-t*.18,l-t),e.lineTo(o+t*.18,l-t),e.lineTo(o+t*.42,l),e.lineTo(o-t*.42,l),e.closePath(),e.fill(),e.fillStyle="#fff",e.fillRect(o-t*.29,l-t*.62,t*.58,t*.14),e.fillStyle="#222",e.fillRect(o-t*.55,l,t*1.1,t*.1)};v(c-n*.04,i+a*2.4,a*1.4),v(c+n*1.04,i+a*2.4,a*1.4);let d=f*.12,h=g*.4;e.fillStyle="#444",e.fillRect(d-3,h,6,g*.2),e.fillStyle="#ff7a00",e.beginPath(),e.moveTo(d-70,h),e.lineTo(d+80,h-22),e.lineTo(d+80,h+22),e.closePath(),e.beginPath(),e.moveTo(d-80,h),e.lineTo(d-40,h-30),e.lineTo(d+80,h-30),e.lineTo(d+80,h+30),e.lineTo(d-40,h+30),e.closePath(),e.fill(),e.fillStyle="#14181d",e.font='900 20px "Arial Black",Inter,Arial,sans-serif',e.fillText("DETOUR",d+14,h+1)}}}};export{W as default};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import{c as E}from"./chunk-JLRXT2AZ.js";import{a as A}from"./chunk-4ZBXB36L.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var w=s=>s.replace(/[&<>"]/g,n=>({"&":"&","<":"<",">":">",'"':"""})[n]),K={id:"rpg-dialog",name:"Quest Log",description:"A tiny pixel-art overworld. An old sage at the crossroads tells you the page isn't on any map, one typed line at a time. Press space to continue.",category:"Games",kind:"2d",motion:"live",tags:["canvas","pixel-art","rpg","8-bit","retro","game","dialog","keyboard"],layout:"none",copy:{title:"You can't go that way.",message:"This path leads nowhere.",actions:[{label:"Return to the village",href:"/",variant:"primary"},{label:"Ask the guild",href:"/contact",variant:"secondary"}]},params:{grass:"#5aa85a",grass2:"#4a944a",path:"#d9c08a",box:"#1a1a3a",border:"#ffffff",text:"#ffffff",lines:["Halt, traveller!","The page you seek is not on any map.","Many have searched. None returned with it.","Best go back to the village."]},theme:{bg:"#3a7a3a",fg:"#fff"},presetName:"Meadow",presets:{desert:{name:"Desert Road",params:{grass:"#e6c98a",grass2:"#d9b874",path:"#b8925c",box:"#3a1d08",border:"#ffd27a",text:"#fff3d6",lines:["The sands have swallowed many roads.","This page is one of them.","Follow the caravan home."]},theme:{bg:"#d9b874"}},dungeon:{name:"Dungeon",params:{grass:"#3a3a44",grass2:"#2e2e36",path:"#55555f",box:"#000000",border:"#d9b25f",text:"#f3e6c8",lines:["A voice echoes in the dark\u2026","There is no page in this dungeon.","Only bats. And regret.","Climb back up the stairs."]},theme:{bg:"#2a2a32"}},snow:{name:"Frozen North",params:{grass:"#e9f2f8",grass2:"#d6e6f0",path:"#b9cbd8",box:"#0d2238",border:"#bfe3ff",text:"#ffffff",lines:["Brrr\u2026 you're far from home.","Even the yetis haven't seen this page.","Head south. Toward the homepage."]},theme:{bg:"#d6e6f0"}}},css:`
|
|
2
|
+
& .rpg{position:absolute;left:50%;bottom:clamp(14px,5cqh,48px);transform:translateX(-50%);width:min(820px,94cqw);z-index:4;pointer-events:auto;
|
|
3
|
+
background:var(--box);color:var(--txt);border:4px solid var(--brd);border-radius:6px;box-shadow:0 0 0 4px var(--box),0 14px 0 0 rgba(0,0,0,.25);
|
|
4
|
+
padding:18px 22px 16px;font:400 clamp(11px,1.25cqw,15px)/1.9 ${E.replace(/"/g,"'")};image-rendering:pixelated}
|
|
5
|
+
& .rpg .who{position:absolute;left:14px;top:-18px;background:var(--box);border:4px solid var(--brd);padding:2px 10px;font-size:.8em}
|
|
6
|
+
& .rpg h1{font:inherit;margin:0;min-height:3.8em}
|
|
7
|
+
& .rpg .opts{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
|
|
8
|
+
& .rpg .opts a{color:var(--txt);text-decoration:none}
|
|
9
|
+
& .rpg .opts a::before{content:" ";white-space:pre}
|
|
10
|
+
& .rpg .opts a:hover::before,.rpg .opts a:focus::before{content:"\u25B6 "}
|
|
11
|
+
& .rpg .more{position:absolute;right:16px;bottom:10px;animation:rpg-b .8s steps(1) infinite}
|
|
12
|
+
@keyframes rpg-b{50%{opacity:0}}
|
|
13
|
+
@media (prefers-reduced-motion:reduce){& .rpg .more{animation:none}}
|
|
14
|
+
`,setup(s){let n=s.params,i=A(s),c=s.copy,o=document.createElement("div");o.className="rpg",o.style.setProperty("--box",n.box),o.style.setProperty("--brd",n.border),o.style.setProperty("--txt",n.text),o.innerHTML=`<div class="who">SAGE</div><h1 aria-live="polite"><span class="lp-sr">Error ${w(c.code)}: ${w(c.title)}</span><span class="say"></span></h1><div class="opts" hidden>${c.actions.map(t=>`<a href="${w(t.href??"/")}">${w(t.label)}</a>`).join("")}</div><span class="more" aria-hidden="true">\u25BC</span>`,s.root.append(o);let L=o.querySelector(".say"),$=o.querySelector(".opts"),q=o.querySelector(".more");o.querySelectorAll("a").forEach(t=>t.addEventListener("click",l=>{l.metaKey||l.ctrlKey||(l.preventDefault(),s.navigate(t.getAttribute("href"),l))}));let g=[...n.lines,`${c.title} (Error ${c.code})`],f=0,v=0,S=0,M=()=>{f<g.length-1&&(f++,v=S)};s.onWindow("keydown",t=>{(t.code==="Space"||t.code==="Enter")&&s.visible()&&f<g.length-1&&(t.preventDefault(),M())}),o.addEventListener("click",t=>{t.target.closest("a")||M()});let H=()=>Math.max(24,Math.round(Math.min(i.w,i.h)/18)),P=(t,l)=>{let e=H(),p=Math.ceil(i.w/e)+1,d=Math.ceil(i.h/e)+1,h=Math.floor(p/2),m=Math.floor(d*.42);for(let a=0;a<d;a++)for(let r=0;r<p;r++){let b=(r===h||a===m)&&!(r>h&&a===m&&r>h+2);t.fillStyle=b?n.path:(r*7+a*13)%5===0?n.grass2:n.grass,t.fillRect(r*e,a*e,e,e),!b&&(r*31+a*17)%11===0&&(t.fillStyle=(r+a)%2?"#ffd84d":"#ff7a9a",t.fillRect(r*e+e*.4,a*e+e*.4,e*.15,e*.15)),!b&&(r*13+a*29)%17===0&&(t.fillStyle="#2f6a2f",t.fillRect(r*e+e*.15,a*e+e*.05,e*.7,e*.6),t.fillStyle="#6b3a1e",t.fillRect(r*e+e*.42,a*e+e*.65,e*.16,e*.3))}let y=(h+2)*e,x=m*e;t.fillStyle="#7a7a80";for(let a=0;a<3;a++)t.fillRect(y+e*(.2+a*.25),x+e*(.2+a%2*.3),e*.4,e*.4);t.fillStyle="#8a5a2a",t.fillRect(y-e*.6,x-e*.9,e*.12,e*.9),t.fillStyle="#c98a4a",t.fillRect(y-e*1,x-e*1.4,e*.9,e*.55),t.fillStyle="#3a1d08",t.font=`700 ${Math.round(e*.26)}px ${E}`,t.textAlign="center",t.fillText(c.code,y-e*.55,x-e*1.02);let T=h*e,C=(m+2)*e+Math.round(Math.sin(l*6))*2,u=e/8,k=(a,r,b,D)=>{a.forEach((N,z)=>[...N].forEach((R,F)=>R!=="."&&(t.fillStyle=D[R],t.fillRect(r+F*u,b+z*u,u,u))))};k(["..hhhh..",".hhhhhh.",".hsssss.",".sseses.","..ssss..",".bbbbbb.",".bbbbbb.","..l..l.."],T,C,{h:"#6b3a1e",s:"#ffd1a8",e:"#222",b:"#3a6cff",l:"#222"}),k(["..wwww..",".wwwwww.",".wsssss.",".sseses.",".wwwwww.","rrrrrrrr",".rrrrrr.","..r..r.."],T+e,(m-1)*e,{w:"#eeeeee",s:"#ffd1a8",e:"#222",r:"#7a2a9a"})};return{resize(){i.reset()},frame(t){S=t;let l=i.g;i.reset(),P(l,t);let e=g[f],p=s.reducedMotion?e.length:Math.min(e.length,Math.floor((t-v)*32));L.textContent=e.slice(0,p);let d=f===g.length-1;$.style.display=d&&p>=e.length?"flex":"none",q.style.display=!d&&p>=e.length?"":"none",!d&&p>=e.length&&t-v>e.length/32+1.6&&!s.reducedMotion&&M()},destroy(){o.remove()}}}};export{K as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as N,d as A,e as Y,f as q,g as z}from"./chunk-JLRXT2AZ.js";import{a as D}from"./chunk-4ZBXB36L.js";import{f as P}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var _=[["...xxxxxx...","..xxxxxxxx..","..xooxxoox..","..xooxxoox..","..xxxxxxxx..","...xxxxxx...",".xxxxxxxxxx.","x.xxxxxxxx.x","..xxxxxxxx..","..xxx..xxx..","..xx....xx..",".xx......x.."],["...xxxxxx...","..xxxxxxxx..","..xooxxoox..","..xooxxoox..","..xxxxxxxx..","...xxxxxx...",".xxxxxxxxxx.","x.xxxxxxxx.x","..xxxxxxxx..","..xxx..xxx..","..x.....xx..","..xx.....xx."]],Q={id:"runner",name:"Offline Runner",description:"A little lost robot runs across an endless desert, jumping over broken links. Press space or tap to take over.",category:"Games",kind:"2d",motion:"game",tags:["canvas","game","playable","endless-runner","pixel-art","light","keyboard","touch"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Space / tap to jump",title:"This page isn't available.",message:"Our robot is still out looking for it. You can help it jump, or head back where things work.",actions:[{label:"Go to homepage",href:"/",variant:"primary"}]},params:{sky:"#f7f7f7",ground:"#535353",ink:"#535353",accent:"#535353",far:"#e3e3e3",night:!1},theme:{bg:"#f7f7f7",fg:"#2b2b2b",accent:"#2b2b2b","accent-fg":"#f7f7f7","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Classic",presets:{ocean:{name:"Beach Run",params:{sky:"#bfe7ff",ground:"#c99a5a",ink:"#14466b",accent:"#ff7a3d",far:"#7fd3f0"},theme:{bg:"#bfe7ff",fg:"#0b2a40",accent:"#14466b","accent-fg":"#fff"}},forest:{name:"Forest",params:{sky:"#e6f2d9",ground:"#3a5a2a",ink:"#2a4020",accent:"#e65a2a",far:"#b9d6a0"},theme:{bg:"#e6f2d9",fg:"#1a2a10",accent:"#2a4020","accent-fg":"#fff"}},mars:{name:"Mars",params:{sky:"#ffb38a",ground:"#7a2a12",ink:"#4a1a08",accent:"#ffe14d",far:"#e6806a"},theme:{bg:"#ffb38a",fg:"#2a0a02",accent:"#4a1a08","accent-fg":"#fff"}},night:{name:"Night Run",params:{sky:"#0d1020",ground:"#cfd4ff",ink:"#cfd4ff",accent:"#ffd76b",far:"#1a1f3a",night:!0},theme:{bg:"#0d1020",fg:"#e9ecff",accent:"#ffd76b","accent-fg":"#0d1020"}},desert:{name:"Desert Sunset",params:{sky:"#ffd7a8",ground:"#8a4b2a",ink:"#5a2d16",accent:"#ff5a36",far:"#f2a77a"},theme:{bg:"#ffd7a8",fg:"#3a1d0c",accent:"#5a2d16","accent-fg":"#ffd7a8"}},synth:{name:"Synthwave",params:{sky:"#140726",ground:"#ff3bd4",ink:"#29e7ff",accent:"#ff3bd4",far:"#2a0f4a",night:!0},theme:{bg:"#140726",fg:"#ffe6ff",accent:"#ff3bd4","accent-fg":"#140726"}}},css:z,setup(b){let i=b.params,a=D(b),g=N(b,{pointerPlays:!1}),c=b.random,e=4,l=0,o={y:0,vy:0,onGround:!0},u=[],E=[],j=[],S=0,d=0,O=Y("runner"),p=0,R=1,H=!1;function B(){e=Math.max(3,Math.min(6,Math.round(a.h/170))),l=Math.round(a.h*.6),E=Array.from({length:6},()=>({x:c()*a.w,y:a.h*(.08+c()*.3),s:.6+c()*.8})),j=Array.from({length:60},()=>({x:c()*a.w,y:c()*l*.8})),T()}function T(){o={y:l,vy:0,onGround:!0},u=[],S=a.w*.32,d=0,R=.8}let w=()=>Math.max(60,a.w*.12);function C(){o.onGround&&(o.vy=-e*210,o.onGround=!1)}function F(t,f,n,v,h){let G=a.g;for(let m=0;m<t.length;m++)for(let k=0;k<t[m].length;k++){let x=t[m][k];x!=="."&&(G.fillStyle=x==="o"?h:v,G.fillRect(f+k*e,n+m*e,e,e))}}function V(t){let f=a.g;if(t.kind===0)f.fillStyle=i.ink,f.fillRect(t.x,l-t.h,t.w,t.h),f.fillStyle=i.sky,f.fillRect(t.x+e,l-t.h+e,t.w-e*2,t.h-e*2),f.fillStyle=i.ink,f.font=`700 ${Math.round(t.w*.34)}px ui-monospace,Menlo,monospace`,f.textAlign="center",f.textBaseline="middle",f.fillText(b.copy.code,t.x+t.w/2,l-t.h/2);else if(t.kind===1){f.strokeStyle=i.ink,f.lineWidth=e*1.4;let n=l-t.h/2;f.beginPath(),f.ellipse(t.x+t.w*.3,n,t.w*.28,t.h*.42,-.5,.3,Math.PI*1.7),f.stroke(),f.beginPath(),f.ellipse(t.x+t.w*.72,n,t.w*.28,t.h*.42,-.5,Math.PI+.3,Math.PI*2.7),f.stroke()}else{f.fillStyle=i.accent;let n=t.y;f.beginPath(),f.arc(t.x+t.w/2,n,t.w/2,0,Math.PI*2),f.fill(),f.fillStyle=i.sky,f.fillRect(t.x+t.w/2-e/2,n-t.w*.28,e,t.w*.34),f.fillRect(t.x+t.w/2-e/2,n+t.w*.14,e,e)}}return B(),{resize(){a.reset(),B()},frame(t,f){let n=a.g;a.reset(),g.playing&&!H&&(H=!0,T());let v=(!b.reducedMotion||g.playing)&&f>0,h=12*e;if(p>0)p-=f,g.pressed()&&p<.6&&(p=0),p<=0&&T();else if(v){if(S+=a.w*.006*f,d+=S*f,g.playing&&(g.pressed()||g.up||g.action)&&C(),!g.playing)for(let r of u){let M=r.x-(w()+h);(r.kind!==2||r.y>l-h*1.2)&&M>0&&M<S*.2&&C()}if(o.vy+=e*620*f,o.y+=o.vy*f,o.y>=l&&(o.y=l,o.vy=0,o.onGround=!0),R-=f,R<=0){let r=c()<.55?0:c()<.6?1:2,M=r===0?e*(9+Math.floor(c()*4)):r===1?e*12:e*8,I=r===0?e*(8+Math.floor(c()*6)):e*8;u.push({x:a.w+20,w:M,h:I,kind:r,y:l-h*(c()<.5?1.9:.6)}),R=.75+c()*1.1-Math.min(.35,d/4e4)}for(let r of u)r.x-=S*f;u=u.filter(r=>r.x+r.w>-20);let x=w()+e*2,y=w()+h-e*2,s=o.y,W=o.y-h+e*2;for(let r of u){let M=r.kind===2?r.y-r.w/2:l-r.h,I=r.kind===2?r.y+r.w/2:l;if(y>r.x+e&&x<r.x+r.w-e&&s>M+e&&W<I)if(g.playing){p=1.2;let $=Math.floor(d/40);$>O&&q("runner",O=$)}else r.x=-999}}if(n.fillStyle=i.sky,n.fillRect(0,0,a.w,a.h),i.night){n.fillStyle=P(i.ink,.7);for(let x of j)n.fillRect((x.x-d*.02+a.w*10)%a.w,x.y,e*.5,e*.5);n.fillStyle=i.accent,n.beginPath(),n.arc(a.w*.78,a.h*.16,e*6,0,Math.PI*2),n.fill(),n.fillStyle=i.sky,n.beginPath(),n.arc(a.w*.78+e*2.5,a.h*.16-e*1.5,e*5,0,Math.PI*2),n.fill()}n.fillStyle=i.far,n.beginPath(),n.moveTo(0,l);for(let x=0;x<=a.w;x+=8){let y=x+d*.15;n.lineTo(x,l-a.h*.06-Math.sin(y*.004)*a.h*.04-Math.sin(y*.011+2)*a.h*.02)}n.lineTo(a.w,l),n.closePath(),n.fill(),n.fillStyle=i.night?P(i.ink,.12):P(i.ink,.18);for(let x of E){let y=((x.x-d*.08*x.s)%(a.w+200)+a.w+200)%(a.w+200)-100,s=e*x.s*2;n.fillRect(y,x.y,22*s,3*s),n.fillRect(y+4*s,x.y-3*s,12*s,3*s),n.fillRect(y+8*s,x.y-5*s,6*s,2*s)}n.fillStyle=i.ground,n.fillRect(0,l,a.w,e);for(let x=0;x<40;x++){let y=((x*137.7-d)%a.w+a.w)%a.w;n.fillRect(y,l+e*2+x*7%5*e,e*(1+x%3),e*.6)}for(let x of u)V(x);let G=o.onGround&&v?Math.floor(t*12)%2:0;F(_[G],w(),o.y-h,i.ink,i.accent===i.ink?i.sky:i.accent),p>0&&(n.fillStyle=i.accent,n.fillRect(w()+3*e,o.y-h+2*e,e*2,e*2),n.fillRect(w()+7*e,o.y-h+2*e,e*2,e*2));let m=Math.max(10,Math.min(14,a.w/90)),k=Math.floor(d/40);A(n,`HI ${String(O).padStart(5,"0")} ${String(k).padStart(5,"0")}`,a.w-24,22,m,i.ink,"right"),!g.playing&&Math.floor(t*1.6)%2===0&&A(n,"DEMO \xB7 PRESS SPACE OR TAP",a.w/2,l+e*8,m,P(i.ink,.75),"center"),p>0&&A(n,"G A M E O V E R",a.w/2,l*.42,m*1.8,i.ink,"center")}}}};export{Q as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S}from"./chunk-4ZBXB36L.js";import{a as p}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var M={id:"scratch-card",name:"Scratch Card",description:"A lottery scratch card. Rub off the silver foil with your cursor to reveal what you won: three matching numbers, of course.",category:"Playful",kind:"2d",motion:"interactive",tags:["canvas","scratch","lottery","interactive","funny","reveal","tactile"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Scratch to reveal",title:"You matched three. Prize: nothing.",message:"Rub off the foil to see what you won. Spoiler: it's an error. The real prize is the homepage.",actions:[{label:"Claim the homepage",href:"/",variant:"primary"}]},params:{card:"#ffcf33",foil:"#c9ced6",foil2:"#9aa1ab",ink:"#1a1a2e",prize:"#e5484d"},theme:{bg:"#2a1b4a",fg:"#fff6dc",accent:"#ffcf33","accent-fg":"#2a1b4a"},presetName:"Golden Ticket",presets:{classic:{name:"Classic Silver",params:{card:"#e6e9ef",foil:"#c9ced6",foil2:"#8e949c",ink:"#14181d",prize:"#d6281a"},theme:{bg:"#14181d",accent:"#e6e9ef","accent-fg":"#14181d"}},mint:{name:"Lucky Mint",params:{card:"#7fe3c0",ink:"#0b2a20",prize:"#c2185b"},theme:{bg:"#0b2a20",accent:"#7fe3c0","accent-fg":"#0b2a20"}},neon:{name:"Neon Jackpot",params:{card:"#ff3bd4",foil:"#d0d4ff",foil2:"#8a90c9",ink:"#12002a",prize:"#3bffd0"},theme:{bg:"#12002a",accent:"#ff3bd4","accent-fg":"#fff"}}},setup(c){let m=c.params,o=S(c),y=[...c.copy.code||"404"].slice(0,6),g,l,a={x:0,y:0,w:0,h:0},f=[],b=0,u=0,x=()=>{let n=Math.min(o.w*.78,760),r=n*.46;a={x:(o.w-n)/2,y:Math.max(16,o.h*.34-r/2),w:n,h:r};let t=Math.min(n*.8/y.length,r*.56);f=y.map((e,i)=>({x:a.x+n/2+(i-(y.length-1)/2)*t*1.08,y:a.y+r*.58,s:t})),g=document.createElement("canvas");let s=Math.min(2,c.dpr);g.width=o.w*s,g.height=o.h*s,l=g.getContext("2d"),l.scale(s,s);for(let e of f){let i=l.createLinearGradient(e.x-e.s/2,e.y-e.s/2,e.x+e.s/2,e.y+e.s/2);i.addColorStop(0,m.foil),i.addColorStop(.5,m.foil2),i.addColorStop(1,m.foil),l.fillStyle=i,l.beginPath(),l.roundRect(e.x-e.s*.48,e.y-e.s*.48,e.s*.96,e.s*.96,e.s*.12),l.fill(),l.fillStyle="rgba(255,255,255,.35)",l.font=`700 ${e.s*.14}px ${p}`,l.textAlign="center",l.fillText("SCRATCH",e.x,e.y+e.s*.05);for(let h=0;h<120;h++)l.fillStyle=`rgba(0,0,0,${Math.random()*.08})`,l.fillRect(e.x-e.s*.48+Math.random()*e.s*.96,e.y-e.s*.48+Math.random()*e.s*.96,2,2)}u=0};x();let d=null,w=(n,r)=>{l.globalCompositeOperation="destination-out",l.lineCap="round",l.lineWidth=Math.max(22,a.w*.05),l.beginPath(),d?l.moveTo(d.x,d.y):l.moveTo(n-.1,r),l.lineTo(n,r),l.stroke(),l.globalCompositeOperation="source-over",d={x:n,y:r},u++};return c.on("pointermove",n=>{if(n.pointerType!=="mouse"&&!n.buttons)return d=null;w(c.pointer.x,c.pointer.y)}),c.on("pointerleave",()=>d=null),{resize(){o.reset(),x()},frame(n,r){let t=o.g;if(o.reset(),!c.pointer.engaged&&!c.reducedMotion&&r>0&&n>1){b+=r;let e=f[Math.floor(b/1.4)%f.length];if(b<f.length*1.4){let i=b%1.4/1.4;w(e.x-e.s*.35+i*e.s*.7,e.y+Math.sin(i*18)*e.s*.3)}else d=null}let s=t.createRadialGradient(o.w/2,o.h*.35,0,o.w/2,o.h*.35,Math.max(o.w,o.h)*.7);s.addColorStop(0,"#3a2a66"),s.addColorStop(1,"#140b26"),t.fillStyle=s,t.fillRect(0,0,o.w,o.h),t.save(),t.translate(a.x+a.w/2,a.y+a.h/2),t.rotate(-.02),t.translate(-(a.x+a.w/2),-(a.y+a.h/2)),t.fillStyle="rgba(0,0,0,.35)",t.beginPath(),t.roundRect(a.x+8,a.y+14,a.w,a.h,18),t.fill(),t.fillStyle=m.card,t.beginPath(),t.roundRect(a.x,a.y,a.w,a.h,18),t.fill(),t.fillStyle="rgba(0,0,0,.18)";for(let e=a.x+16;e<a.x+a.w-10;e+=14)t.fillRect(e,a.y+a.h*.2,6,2);t.fillStyle=m.ink,t.font=`900 ${a.h*.12}px ${p}`,t.textAlign="left",t.fillText("LUCKY 404",a.x+a.w*.05,a.y+a.h*.15),t.font=`700 ${a.h*.055}px ${p}`,t.textAlign="right",t.fillText("MATCH 3 TO WIN",a.x+a.w*.95,a.y+a.h*.14);for(let e of f)t.fillStyle="#fffdf6",t.beginPath(),t.roundRect(e.x-e.s*.48,e.y-e.s*.48,e.s*.96,e.s*.96,e.s*.12),t.fill();y.forEach((e,i)=>{let h=f[i];t.fillStyle=m.prize,t.font=`900 ${h.s*.7}px ${p}`,t.textAlign="center",t.textBaseline="middle",t.fillText(e,h.x,h.y+h.s*.04)}),t.textBaseline="alphabetic",t.drawImage(g,0,0,o.w,o.h),t.restore()}}}};export{M as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as T}from"./chunk-4ZBXB36L.js";import{f as u}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var P={id:"screensaver",name:"Screensaver",description:"The logo bounces off the edges and changes colour every time. It's waiting for the perfect corner hit, and so are you.",category:"Retro Tech",kind:"2d",motion:"live",tags:["canvas","screensaver","bounce","nostalgia","funny","dark"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Idle",title:"Nothing's happening here.",message:"This page went to sleep and never woke up. Wait for the corner hit, or wake up the homepage.",actions:[{label:"Wake up",href:"/",variant:"primary"}]},params:{bg:"#000000",colors:["#ff3b3b","#ffb33b","#fff23b","#3bff6b","#3bd8ff","#7b5cff","#ff3bd8"],speed:1,crt:!1},theme:{bg:"#000",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#000"},presetName:"Classic",presets:{neon:{name:"Neon",params:{bg:"#05000d",colors:["#ff00e6","#00f0ff","#ffe600","#00ff85"]}},mono:{name:"Monochrome",params:{bg:"#000000",colors:["#ffffff","#bbbbbb","#777777"]}},crt:{name:"CRT",params:{crt:!0},theme:{}},pastel:{name:"Pastel",params:{bg:"#f7f3ee",colors:["#ff8fa3","#ffc06b","#7bd88f","#7bc8ff","#b49cff"]},theme:{bg:"#f7f3ee",fg:"#1c1a17",accent:"#1c1a17","accent-fg":"#f7f3ee"}},fast:{name:"Turbo",params:{speed:2.4}}},setup(m){let a=m.params,t=T(m),b=m.random,k=m.copy.code||"404",n=0,i=0,h=1,p=1,o=0,r=0,c=0,v=0,w=0,g=0,y=[],M=()=>{o=Math.min(t.w*.3,340),r=o*.5,n=b()*(t.w-o),i=b()*(t.h*.62-r);let f=Math.max(t.w,t.h)*.12*a.speed;h=f,p=f*.8};M();let R=(f,s)=>{f.save(),f.translate(n,i),f.fillStyle=s,f.font=`italic 900 ${r*.62}px "Arial Black","Helvetica Neue",Arial,sans-serif`,f.textAlign="center",f.textBaseline="middle",f.fillText(k,o/2,r*.38),f.beginPath(),f.ellipse(o/2,r*.84,o*.46,r*.13,0,0,Math.PI*2),f.fill(),f.fillStyle=a.bg,f.font=`900 ${r*.12}px "Arial Black",Arial,sans-serif`,f.fillText("NOT FOUND",o/2,r*.845),f.restore()};return{resize(){t.reset(),M()},frame(f,s){let l=t.g;t.reset();let S=t.h*.62;if(s>0){n+=h*s,i+=p*s;let e=!1,d=!1;if((n<=0||n+o>=t.w)&&(h=-h,n=Math.max(0,Math.min(t.w-o,n)),e=!0),(i<=0||i+r>=S)&&(p=-p,i=Math.max(0,Math.min(S-r,i)),d=!0),(e||d)&&(c=(c+1)%a.colors.length,v++),e&&d){w++,g=1;for(let x=0;x<80;x++)y.push({x:n+o/2,y:i+r/2,vx:(b()-.5)*900,vy:(b()-.8)*900,life:1.4,col:a.colors[x%a.colors.length]})}}l.fillStyle=a.bg,l.fillRect(0,0,t.w,t.h),g>0&&(l.fillStyle=u(a.colors[c],g*.2),l.fillRect(0,0,t.w,t.h),g-=s),R(l,a.colors[c]);for(let e of y)e.x+=e.vx*s,e.y+=e.vy*s,e.vy+=900*s,e.life-=s,l.fillStyle=u(e.col,Math.max(0,e.life)),l.fillRect(e.x,e.y,5,9);if(y=y.filter(e=>e.life>0),l.font="600 12px ui-monospace,Menlo,monospace",l.fillStyle=u(a.colors[c],.7),l.textAlign="right",l.fillText(`edges ${v} \xB7 corners ${w}`,t.w-18,24),a.crt){l.fillStyle="rgba(0,0,0,.25)";for(let e=0;e<t.h;e+=3)l.fillRect(0,e,t.w,1)}}}}};export{P as default};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import{a,c as i,d as l,e as p}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var g={id:"search-404",name:"Search",description:"The most useful 404 for docs, shops and blogs: a search box that sends people straight to your search page, plus a few popular links.",category:"Simple",kind:"2d",motion:"static",tags:["simple","search","docs","ecommerce","blog","useful","static","fast"],layout:"none",copy:{eyebrow:"404",title:"We couldn\u2019t find that page",message:"Try searching for it, or start from one of these:",actions:[{label:"Go home",href:"/",icon:"home"}]},params:{searchUrl:"/search",placeholder:"Search the site\u2026",links:["Getting started|/docs","Pricing|/pricing","Blog|/blog","Contact|/contact"]},theme:{bg:"#ffffff",fg:"#111827",accent:"#2563eb","accent-fg":"#ffffff",radius:"10px"},presetName:"Light",presets:{dark:{name:"Dark",theme:{bg:"#0d1117",fg:"#e6edf3",accent:"#2f81f7","accent-fg":"#ffffff"}},shop:{name:"Shop",title:"This product has left the shelf",message:"Search our store or browse a popular collection:",params:{placeholder:"Search products\u2026",links:["New arrivals|/new","Best sellers|/best-sellers","Sale|/sale","Gift cards|/gift-cards"]},theme:{bg:"#faf7f2",fg:"#1c1917",accent:"#1c1917","accent-fg":"#faf7f2",radius:"999px"}},docs:{name:"Docs",title:"This doc page doesn\u2019t exist",message:"It may have moved in a recent update. Search the docs:",params:{placeholder:"Search documentation\u2026",links:["Quick start|/docs/start","API reference|/docs/api","Guides|/docs/guides","Changelog|/changelog"]},theme:{bg:"#fcfcfd",fg:"#18181b",accent:"#7c3aed","accent-fg":"#ffffff",font:"ui-sans-serif,system-ui,sans-serif"}}},css:`
|
|
2
|
+
& .sr4{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;overflow:auto}
|
|
3
|
+
& .sr4 .ey{font-size:13px;font-weight:700;color:var(--lp-accent);letter-spacing:.06em}
|
|
4
|
+
& .sr4 h1{margin:10px 0 0;font-size:clamp(26px,4.4cqw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
|
|
5
|
+
& .sr4 p{margin:14px 0 0;color:var(--lp-muted);font-size:clamp(14px,1.4cqw,16px)}
|
|
6
|
+
& .sr4 form{margin-top:26px;display:flex;width:min(520px,100%);border:1px solid color-mix(in srgb,var(--lp-fg) 16%,transparent);border-radius:var(--lp-radius);background:color-mix(in srgb,var(--lp-fg) 3%,var(--lp-bg));overflow:hidden;transition:border-color .2s,box-shadow .2s}
|
|
7
|
+
& .sr4 form:focus-within{border-color:var(--lp-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--lp-accent) 18%,transparent)}
|
|
8
|
+
& .sr4 input{flex:1;min-width:0;border:0;background:none;padding:14px 16px;font:inherit;font-size:15px;color:var(--lp-fg);outline:none}
|
|
9
|
+
& .sr4 form button{border:0;margin:5px;padding:0 18px;border-radius:calc(var(--lp-radius) - 3px);background:var(--lp-accent);color:var(--lp-accent-fg);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
|
|
10
|
+
& .sr4 ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
|
|
11
|
+
& .sr4 ul a{display:block;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--lp-fg) 6%,transparent);color:var(--lp-fg);text-decoration:none;font-size:13.5px;font-weight:500}
|
|
12
|
+
& .sr4 ul a:hover{background:color-mix(in srgb,var(--lp-accent) 14%,transparent);color:var(--lp-accent)}
|
|
13
|
+
& .sr4 .lp-actions{margin-top:26px}
|
|
14
|
+
& .sr4 .lp-btn--primary{background:none;color:var(--lp-fg);padding:8px 4px;font-weight:600}
|
|
15
|
+
`,setup(t){let o=t.params,n=t.copy,f=o.links.map(e=>e.split("|")).map(([e,r])=>`<li><a href="${a(r??"/")}">${a(e)}</a></li>`).join(""),s=l(t,"sr4",`<span class="ey">${a(n.eyebrow||n.code)}</span><h1>${p(n.code)}${a(n.title)}</h1><p>${a(n.message)}</p>
|
|
16
|
+
<form role="search" action="${a(o.searchUrl)}"><input name="q" type="search" aria-label="Search" placeholder="${a(o.placeholder)}" data-lp-interactive><button type="submit">Search</button></form>
|
|
17
|
+
<ul>${f}</ul>`);s.querySelectorAll("ul a").forEach(e=>e.addEventListener("click",r=>{r.metaKey||r.ctrlKey||(r.preventDefault(),t.navigate(e.getAttribute("href"),r))}));let c=s.querySelector("form");return c.addEventListener("submit",e=>{e.preventDefault();let r=c.elements.namedItem("q").value.trim();t.navigate(o.searchUrl+(o.searchUrl.includes("?")?"&":"?")+"q="+encodeURIComponent(r))}),s.append(i(t)),{destroy:()=>s.remove()}}};export{g as default};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import{a as r,d}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var c={id:"server-default",name:"Server Default",description:"The bare web-server error page everyone recognises: a Times heading, a rule and the server signature. Deadpan, tiny and on purpose.",category:"Simple",kind:"2d",motion:"static",tags:["simple","nginx","apache","server","plain","developer","joke","static","fast"],layout:"none",copy:{title:"Not Found",message:"The requested URL was not found on this server.",actions:[{label:"Return to the home page",href:"/"}]},params:{server:"nginx"},theme:{bg:"#ffffff",fg:"#000000"},presetName:"nginx",presets:{apache:{name:"Apache",params:{server:"Apache/2.4.58 (Ubuntu) Server at localhost Port 443"}},iis:{name:"IIS",title:"404 - File or directory not found.",message:"The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.",params:{server:"Microsoft-IIS/10.0"}},dark:{name:"Dark",theme:{bg:"#1e1e1e",fg:"#d4d4d4"}}},css:`
|
|
2
|
+
& .sd{position:absolute;inset:0;padding:8px 8px;font-family:"Times New Roman",Times,serif;font-size:16px;color:var(--lp-fg);overflow:auto}
|
|
3
|
+
& .sd h1{margin:21px 0;font-size:2em;font-weight:700;text-align:center;font-family:inherit}
|
|
4
|
+
&.sd-apache .sd h1,&.sd-apache .sd p{text-align:left}
|
|
5
|
+
& .sd p{margin:16px 0;text-align:center}
|
|
6
|
+
& .sd hr{border:0;border-top:1px solid color-mix(in srgb,var(--lp-fg) 40%,transparent);margin:8px 0}
|
|
7
|
+
& .sd address,& .sd center{font-style:normal;text-align:center;display:block}
|
|
8
|
+
& .sd a{color:#0000ee}
|
|
9
|
+
& .sd a:visited{color:#551a8b}
|
|
10
|
+
`,setup(a){let e=a.copy,o=a.params,n=/apache/i.test(o.server);a.root.classList.toggle("sd-apache",n);let l=/^\d/.test(e.title)?e.title:`${e.code} ${e.title}`,s=e.actions[0],i=d(a,"sd",`<h1><span class="lp-sr">Error ${r(e.code)}: </span>${r(l)}</h1>${n||e.message!=="The requested URL was not found on this server."?`<p>${r(e.message)}</p>`:""}${s?`<p><a href="${r(s.href??"/")}">${r(s.label)}</a></p>`:""}<hr>${n?`<address>${r(o.server)}</address>`:`<center>${r(o.server)}</center>`}`);return i.querySelector("a")?.addEventListener("click",t=>{t.metaKey||t.ctrlKey||(t.preventDefault(),a.navigate(s.href??"/",t))}),{destroy:()=>i.remove()}}};export{c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as p}from"./chunk-4ZBXB36L.js";import{f as c}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var v={id:"server-room",name:"Server Room",description:"Rows of racks blinking away happily in the cold aisle, except one, which is dark, smoking and very much not serving your page.",category:"Retro Tech",kind:"2d",motion:"live",tags:["canvas","server","datacenter","devops","funny","dark","tech"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Rack 4 \xB7 Unit 04",title:"The server for this page is down.",message:"Every other machine is humming along. This one isn't. An on-call engineer has been paged.",actions:[{label:"Route me home",href:"/",variant:"primary"},{label:"Status page",href:"/status",variant:"secondary"}]},params:{bg:"#06080c",rack:"#14171d",led:["#3dff8a","#3bd6ff","#ffb000"],dead:"#ff3b3b",fire:!1},theme:{bg:"#06080c",fg:"#e6edf5",accent:"#3dff8a","accent-fg":"#021208","code-color":"rgba(230,237,245,.12)"},presetName:"Cold Aisle",presets:{blue:{name:"Blue Hall",params:{bg:"#020814",rack:"#0b1426",led:["#3bd6ff","#5a7bff","#ffffff"],dead:"#ffb000"},theme:{bg:"#020814",accent:"#3bd6ff","accent-fg":"#020814"}},fire:{name:"On Fire",eyebrow:"This is fine",title:"This is fine.",message:"The server hosting this page is having a moment. Everything else is fine. Mostly.",params:{fire:!0}},white:{name:"Clean Room",params:{bg:"#e9edf2",rack:"#ffffff",led:["#16a34a","#2563eb","#d97706"]},theme:{bg:"#e9edf2",fg:"#0f172a",accent:"#0f172a","accent-fg":"#fff","code-color":"rgba(15,23,42,.1)"}}},setup(d){let i=d.params,t=p(d),m=d.random,g=[],h=[],n={x:0,y:0,w:0,h:0},b=()=>{let o=t.w<700?3:5,f=Math.min(160,t.w*.86/o-14),a=t.h*.6,e=14,r=(t.w-(o*f+(o-1)*e))/2;return Array.from({length:o},(l,s)=>({x:r+s*(f+e),y:t.h*.06,w:f,h:a,dead:s===Math.floor(o/2)}))},u=()=>{g=[];for(let o of b()){o.dead&&(n=o);let f=14;for(let a=0;a<f;a++){let e=o.y+14+a*((o.h-28)/f);for(let r=0;r<6;r++)g.push({x:o.x+14+r*9,y:e+8,col:i.led[Math.floor(m()*i.led.length)],rate:1+m()*8,ph:m()*10,dead:o.dead})}}};return u(),{resize(){t.reset(),u()},frame(o,f){let a=t.g;t.reset(),a.fillStyle=i.bg,a.fillRect(0,0,t.w,t.h),a.strokeStyle=c(i.led[1],.06);for(let e=-10;e<=10;e++)a.beginPath(),a.moveTo(t.w/2+e*30,t.h*.66),a.lineTo(t.w/2+e*160,t.h),a.stroke();for(let e of b()){a.fillStyle=i.rack,a.fillRect(e.x,e.y,e.w,e.h),a.strokeStyle=c("#ffffff",.06),a.strokeRect(e.x+.5,e.y+.5,e.w-1,e.h-1);let r=14;for(let l=0;l<r;l++){let s=e.y+14+l*((e.h-28)/r);a.fillStyle=c("#000000",.35),a.fillRect(e.x+8,s,e.w-16,(e.h-28)/r-4),a.fillStyle=c("#ffffff",.05);for(let y=0;y<8;y++)a.fillRect(e.x+e.w-60+y*6,s+4,3,(e.h-28)/r-12)}e.dead&&(a.fillStyle=c(i.dead,.08+.06*Math.sin(o*3)),a.fillRect(e.x,e.y,e.w,e.h),a.fillStyle=i.dead,a.font="700 12px ui-monospace,Menlo,monospace",a.textAlign="center",a.fillText(`ERR ${d.copy.code}`,e.x+e.w/2,e.y+e.h+22))}for(let e of g){let r,l=e.col;e.dead?(r=Math.floor(o*1.5+e.ph)%4===0&&e.x<n.x+20,l=i.dead):r=Math.sin(o*e.rate+e.ph)>-.2||Math.random()<.02,r&&(a.fillStyle=l,a.shadowColor=l,a.shadowBlur=6,a.fillRect(e.x,e.y,4,3))}a.shadowBlur=0,f>0&&Math.random()<f*(i.fire?20:6)&&h.push({x:n.x+n.w*(.3+Math.random()*.4),y:n.y+10,r:10+Math.random()*14,life:1,vx:(Math.random()-.5)*20});for(let e of h)e.y-=30*f,e.x+=e.vx*f,e.r+=18*f,e.life-=f*.35,a.fillStyle=`rgba(140,140,150,${Math.max(0,e.life*.25)})`,a.beginPath(),a.arc(e.x,e.y,e.r,0,Math.PI*2),a.fill();if(h=h.filter(e=>e.life>0),i.fire)for(let e=0;e<9;e++){let r=n.x+10+e/8*(n.w-20),l=30+Math.sin(o*9+e*1.7)*12+Math.sin(o*17+e)*6,s=a.createLinearGradient(0,n.y-l,0,n.y+6);s.addColorStop(0,"rgba(255,200,60,0)"),s.addColorStop(.4,"rgba(255,140,30,.85)"),s.addColorStop(1,"rgba(255,60,20,.95)"),a.fillStyle=s,a.beginPath(),a.moveTo(r-12,n.y+6),a.quadraticCurveTo(r-6,n.y-l*.5,r,n.y-l),a.quadraticCurveTo(r+6,n.y-l*.5,r+12,n.y+6),a.fill()}}}}};export{v as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as H}from"./chunk-JLRXT2AZ.js";import{a as A}from"./chunk-4ZBXB36L.js";import{f as b}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var D={id:"skyline",name:"City Lights",description:"A city at night where the lit office windows across the skyline spell out the error, reflected in the river below.",category:"Urban",kind:"2d",motion:"live",tags:["canvas","city","night","windows","skyline","pixel","calm"],layout:"top",codeInScene:!0,copy:{eyebrow:"After hours",title:"Everyone's gone home. So did the page.",message:"The night shift lit up the windows to tell you. The page you wanted isn't in this building.",actions:[{label:"Head home",href:"/",variant:"primary"}]},params:{skyTop:"#050816",skyBottom:"#1d1640",building:"#0a0c16",window:"#1a1f33",lit:"#ffd27a",water:!0},theme:{bg:"#070a18",fg:"#f4ecdc",accent:"#ffd27a","accent-fg":"#1a1000"},presetName:"Midnight",presets:{green:{name:"Emerald City",params:{lit:"#6bffb0",skyTop:"#020a08",skyBottom:"#0d2a20"},theme:{accent:"#6bffb0","accent-fg":"#02140b"}},snow:{name:"Snowy Night",params:{lit:"#fff1c2",skyTop:"#1a2236",skyBottom:"#4a5a7a",building:"#0f1422",water:!1},theme:{bg:"#1a2236"}},dusk:{name:"Dusk",params:{skyTop:"#2b2a6b",skyBottom:"#ff8a5c",building:"#1a1430",window:"#2a2448",lit:"#fff1c2"},theme:{bg:"#2b2a6b",accent:"#fff1c2","accent-fg":"#2b2a6b"}},cyber:{name:"Neo City",params:{skyTop:"#0a0018",skyBottom:"#3a0a4a",building:"#080010",window:"#1a0a2a",lit:"#ff3bd4"},theme:{bg:"#0a0018",fg:"#ffe6ff",accent:"#ff3bd4","accent-fg":"#fff"}},cold:{name:"Office Blue",params:{lit:"#bfe3ff",skyBottom:"#0f2240"},theme:{accent:"#bfe3ff","accent-fg":"#071226"}}},css:"& .lp-overlay{padding-top:clamp(24px,6cqh,64px)}",setup(m){let i=m.params,o=A(m),h=m.random,g,x=[],a=0;function E(){let c=o.w,y=o.h;a=y*(i.water?.8:.96);let t=Math.max(7,Math.min(13,c/130)),n=t,s=t*1.35,e=Math.floor(c/n),l=y*.36,r=Math.floor((a-l)/s),f=Math.round(e*.86),B=Math.round(r*.72),N=H(m.copy.code||"404",f,B,900),p=Math.floor((e-f)/2),u=Math.floor(r*.06),k=Math.min(2,m.dpr);g=document.createElement("canvas"),g.width=c*k,g.height=y*k;let M=g.getContext("2d");M.scale(k,k),x=[];let d=0;for(;d<e;){let w=4+Math.floor(h()*7),v=d+w/2>p&&d<p+f?Math.max(u+B+2,r-Math.floor(h()*3)):Math.floor(r*(.35+h()*.6)),C=a-v*s;M.fillStyle=i.building,M.fillRect(d*n,C-s*.6,w*n,a-C+s),h()>.7&&M.fillRect(d*n+w*n/2,C-s*3,2,s*2.4);for(let S=0;S<v;S++)for(let R=0;R<w;R++){let T=d+R,I=r-v+S,L=T>=p&&T<p+f&&I>=u&&I<u+B&&N[(I-u)*f+(T-p)];x.push({x:T*n+n*.18,y:a-(v-S)*s+s*.2,w:n*.64,h:s*.55,code:!!L,flick:h(),on:!L&&h()<.08})}d+=w}}return E(),{resize(){o.reset(),E()},frame(c,y){let t=o.g;o.reset();let n=t.createLinearGradient(0,0,0,a);n.addColorStop(0,i.skyTop),n.addColorStop(1,i.skyBottom),t.fillStyle=n,t.fillRect(0,0,o.w,o.h),t.drawImage(g,0,0,o.w,o.h);let s=m.reducedMotion?1:Math.min(1,c/3);for(let e of x){y>0&&!e.code&&Math.random()<4e-4&&(e.on=!e.on);let l=e.on;e.code&&(l=e.flick<s&&!(Math.sin(c*7+e.flick*40)>.995)),t.fillStyle=l?e.code?i.lit:b(i.lit,.5):i.window,t.fillRect(e.x,e.y,e.w,e.h)}if(i.water){t.save(),t.globalAlpha=.42,t.translate(0,a*2),t.scale(1,-1),t.drawImage(o.canvas,0,0,o.canvas.width,o.canvas.height*(a/o.h),0,0,o.w,a),t.restore();let e=t.createLinearGradient(0,a,0,o.h);e.addColorStop(0,b(i.skyTop,.35)),e.addColorStop(1,b(i.skyTop,.92)),t.fillStyle=e,t.fillRect(0,a,o.w,o.h-a),t.fillStyle=b(i.lit,.12);for(let l=0;l<70;l++){let r=a+l*37.7%(o.h-a),f=(l*113.3+c*18*(1+l%3))%(o.w+200)-100;t.fillRect(f,r,30+l%5*12,1)}}}}}};export{D as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S}from"./chunk-4ZBXB36L.js";import{f as b}from"./chunk-HXSSPN2I.js";import{a as M,f as w}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var v={id:"skywriting",name:"Skywriting",description:"A little plane loops across a clear sky, writing the error in white smoke puffs that slowly drift and fade.",category:"Playful",kind:"2d",motion:"live",tags:["canvas","sky","plane","smoke","summer","light","calm"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Message in the sky",title:"We spelled it out for you.",message:"The page you wanted isn't here, and now everyone in town knows it. Fly home.",actions:[{label:"Fly home",href:"/",variant:"primary"}]},params:{skyTop:"#4aa3f0",skyBottom:"#cfeaff",smoke:"#ffffff",plane:"#e5484d"},theme:{bg:"#8ccaf8",fg:"#06233d",accent:"#06233d","accent-fg":"#fff"},presetName:"Summer",presets:{sunset:{name:"Sunset",params:{skyTop:"#3a3a8a",skyBottom:"#ffb38a",smoke:"#fff1e6",plane:"#1d1d22"},theme:{bg:"#c98a8a",fg:"#1a0a14",accent:"#1a0a14"}},pink:{name:"Cotton Candy",params:{skyTop:"#ff9ec4",skyBottom:"#ffe6f0",smoke:"#ffffff",plane:"#5b2cff"},theme:{bg:"#ffc2da",fg:"#3a0a22",accent:"#3a0a22"}},night:{name:"Searchlights",params:{skyTop:"#050a1f",skyBottom:"#1d2a55",smoke:"#cfe0ff",plane:"#ffd23f"},theme:{bg:"#0b1430",fg:"#eef2ff",accent:"#eef2ff","accent-fg":"#0b1430"}}},setup(l){let p=l.params,s=S(l),d=l.random,o=[],m=[],f=0,g=0,k=()=>{let r=Math.min(s.w*.8,1e3),y=Math.min(r*.4,s.h*.42),e=w(l.copy.code||"404",{width:r,height:y,font:M,weight:300,fit:.95,step:Math.max(6,r/120),random:d}),i=[];for(let a=0;a<e.length;a+=2)i.push([e[a]+(s.w-r)/2,e[a+1]+s.h*.36-y/2]);i.sort((a,t)=>Math.round(a[0]/14)-Math.round(t[0]/14)||(Math.round(a[0]/14)%2?t[1]-a[1]:a[1]-t[1])),o=i,m=[],f=0};return k(),{resize(){s.reset(),k()},frame(r,y){let e=s.g;s.reset();let i=e.createLinearGradient(0,0,0,s.h);if(i.addColorStop(0,p.skyTop),i.addColorStop(1,p.skyBottom),e.fillStyle=i,e.fillRect(0,0,s.w,s.h),l.reducedMotion&&!m.length)for(let[t,n]of o)m.push({x:t,y:n,r:7,born:0});if(y>0){let t=o.length/7,n=Math.min(o.length,(r-g)*t);for(;f<n;){let[c,h]=o[Math.floor(f)];m.push({x:c+(d()-.5)*3,y:h+(d()-.5)*3,r:4+d()*3,born:r}),f++}f>=o.length&&r-g>16&&(g=r,f=0,m=[])}for(let t of m){let n=r-t.born,c=t.r+Math.min(n,10)*1.1,h=l.reducedMotion?.9:Math.max(0,.95-Math.max(0,n-6)*.12),u=t.x+n*3;e.fillStyle=b(p.smoke,h*.75),e.beginPath(),e.arc(u,t.y-n*.6,c,0,Math.PI*2),e.fill()}let a=Math.min(o.length-1,Math.max(0,Math.floor(f)));if(f<o.length&&o.length){let[t,n]=o[a],[c,h]=o[Math.max(0,a-3)],u=Math.atan2(n-h,t-c);e.save(),e.translate(t+6,n),e.rotate(u),e.fillStyle=p.plane,e.beginPath(),e.moveTo(14,0),e.lineTo(-10,-4),e.lineTo(-10,4),e.closePath(),e.fill(),e.fillRect(-2,-12,6,24),e.fillRect(-12,-6,4,12),e.restore()}}}}};export{v as default};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var M=a=>a.replace(/[&<>"]/g,i=>({"&":"&","<":"<",">":">",'"':"""})[i]),H={id:"slot-machine",name:"Jackpot",description:"A one-armed bandit that always lands on the error. Pull the lever (or press space) as often as you like.",category:"Playful",kind:"2d",motion:"interactive",tags:["dom","css-3d","casino","game","funny","interactive","neon"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Pull the lever",title:"Jackpot! Of nothing.",message:"Every spin lands on the same three numbers. The house always wins, and the house is the homepage.",actions:[{label:"Cash out at home",href:"/",variant:"primary"}]},params:{body:"#c4161c",trim:"#ffd166",reel:"#fffaf0",ink:"#1a1a1a",lights:"#ffe08a",symbols:["7","\u{1F352}","\u{1F514}","\u{1F34B}","\u2605","BAR","\u{1F48E}","?"]},theme:{bg:"#1b0b2e",fg:"#fff3d6",accent:"#ffd166","accent-fg":"#1b0b2e"},presetName:"Vegas",presets:{candy:{name:"Candy Crush",params:{body:"#ff6fb1",trim:"#fff1f8",reel:"#ffffff",ink:"#4a0f2a",lights:"#ffe6f2"},theme:{bg:"#ffd6e8",fg:"#4a0f2a",accent:"#4a0f2a","accent-fg":"#fff"}},cyber:{name:"Cyber",params:{body:"#1a1a2e",trim:"#00f0ff",reel:"#0b0b18",ink:"#00f0ff",lights:"#ff00e6"},theme:{bg:"#05050f",fg:"#e6fbff",accent:"#00f0ff","accent-fg":"#05050f"}},mint:{name:"Retro Mint",params:{body:"#3fb8a5",trim:"#f4efe1",reel:"#fffdf6",ink:"#1f3b37",lights:"#fff2c2"},theme:{bg:"#f4efe1",fg:"#1f3b37",accent:"#1f3b37","accent-fg":"#f4efe1"}},noir:{name:"Black & Gold",params:{body:"#111111",trim:"#d4af37",reel:"#f6f1e3",ink:"#111",lights:"#f5d76e"},theme:{bg:"#050505",fg:"#f6f1e3",accent:"#d4af37","accent-fg":"#050505"}}},css:`
|
|
2
|
+
& .sm-wrap{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(16px,5cqh,56px)}
|
|
3
|
+
& .sm{--u:clamp(54px,8.4cqw,112px);position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--body) 80%,#fff),var(--body) 30%,color-mix(in srgb,var(--body) 70%,#000));
|
|
4
|
+
border-radius:calc(var(--u)*.35) calc(var(--u)*.35) calc(var(--u)*.18) calc(var(--u)*.18);padding:calc(var(--u)*.5) calc(var(--u)*.42) calc(var(--u)*.42);
|
|
5
|
+
box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.25);border:4px solid var(--trim)}
|
|
6
|
+
& .sm-top{position:absolute;left:50%;top:calc(var(--u)*-.62);transform:translateX(-50%);background:var(--trim);color:var(--body);font:900 calc(var(--u)*.28)/1 var(--lp-font);
|
|
7
|
+
letter-spacing:.18em;padding:calc(var(--u)*.14) calc(var(--u)*.4);border-radius:999px;white-space:nowrap;box-shadow:0 6px 0 rgba(0,0,0,.25)}
|
|
8
|
+
& .sm-bulbs{position:absolute;inset:calc(var(--u)*.14);border-radius:inherit;pointer-events:none}
|
|
9
|
+
& .sm-bulbs i{position:absolute;width:calc(var(--u)*.09);height:calc(var(--u)*.09);border-radius:50%;background:var(--lights);box-shadow:0 0 10px var(--lights);opacity:.35}
|
|
10
|
+
& .sm-bulbs i.on{opacity:1}
|
|
11
|
+
& .sm-win{display:flex;gap:calc(var(--u)*.12);background:#0b0b0b;padding:calc(var(--u)*.12);border-radius:calc(var(--u)*.14);box-shadow:inset 0 4px 12px rgba(0,0,0,.8)}
|
|
12
|
+
& .sm-reel{width:var(--u);height:calc(var(--u)*1.25);overflow:hidden;background:var(--reel);border-radius:calc(var(--u)*.08);position:relative;
|
|
13
|
+
box-shadow:inset 0 calc(var(--u)*.28) calc(var(--u)*.2) -calc(var(--u)*.1) rgba(0,0,0,.4)}
|
|
14
|
+
& .sm-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,transparent 72%,rgba(0,0,0,.45));pointer-events:none}
|
|
15
|
+
& .sm-strip{position:absolute;left:0;right:0;top:0;will-change:transform}
|
|
16
|
+
& .sm-strip div{height:calc(var(--u)*1.25);display:flex;align-items:center;justify-content:center;font:900 calc(var(--u)*.7)/1 var(--lp-font);color:var(--ink)}
|
|
17
|
+
& .sm-strip div.small{font-size:calc(var(--u)*.38);letter-spacing:.04em}
|
|
18
|
+
& .sm-pay{margin-top:calc(var(--u)*.22);display:flex;justify-content:space-between;align-items:center;color:var(--trim);font:700 calc(var(--u)*.16)/1 var(--lp-font-mono);letter-spacing:.12em}
|
|
19
|
+
& .sm-lever{position:absolute;right:calc(var(--u)*-.62);top:calc(var(--u)*.2);width:calc(var(--u)*.5);height:calc(var(--u)*2.2);cursor:pointer;pointer-events:auto}
|
|
20
|
+
& .sm-lever .arm{position:absolute;left:50%;bottom:calc(var(--u)*.3);width:calc(var(--u)*.12);height:calc(var(--u)*1.7);margin-left:calc(var(--u)*-.06);
|
|
21
|
+
background:linear-gradient(90deg,#9a9a9a,#f2f2f2,#8a8a8a);border-radius:999px;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
|
|
22
|
+
& .sm-lever .ball{position:absolute;left:50%;top:calc(var(--u)*-.28);width:calc(var(--u)*.42);height:calc(var(--u)*.42);margin-left:calc(var(--u)*-.21);border-radius:50%;
|
|
23
|
+
background:radial-gradient(circle at 35% 30%,#fff,var(--body) 40%,color-mix(in srgb,var(--body) 60%,#000))}
|
|
24
|
+
& .sm-lever .base{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*.45);border-radius:calc(var(--u)*.12);background:linear-gradient(180deg,var(--trim),color-mix(in srgb,var(--trim) 60%,#000))}
|
|
25
|
+
& .sm-lever.pulled .arm{transform:scaleY(-.55)}
|
|
26
|
+
& .sm-stage-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--lights) 22%,transparent),transparent 60%)}
|
|
27
|
+
@media (prefers-reduced-motion:reduce){& .sm-lever .arm{transition:none}}
|
|
28
|
+
`,setup(a){let i=a.params,P=[...a.copy.code||"404"].slice(0,5),g=i.symbols,r=document.createElement("div");r.className="sm-wrap";for(let[e,t]of Object.entries({"--body":i.body,"--trim":i.trim,"--reel":i.reel,"--ink":i.ink,"--lights":i.lights}))r.style.setProperty(e,t);let h=4,T=e=>{let t=[];for(let s=0;s<h;s++)for(let f of g)t.push(f);return t.push(e),t.map(s=>`<div class="${s.length>2?"small":""}">${M(s)}</div>`).join("")};r.innerHTML=`<div class="sm-stage-glow"></div><div class="sm" aria-hidden="true">
|
|
29
|
+
<div class="sm-top">ERROR \xB7 ${M(a.copy.code)}</div><div class="sm-bulbs"></div>
|
|
30
|
+
<div class="sm-win">${P.map(e=>`<div class="sm-reel"><div class="sm-strip">${T(e)}</div></div>`).join("")}</div>
|
|
31
|
+
<div class="sm-pay"><span>CREDITS 0</span><span class="spins">SPINS 0</span></div>
|
|
32
|
+
<button class="sm-lever" type="button" aria-label="Pull the lever"><div class="base"></div><div class="arm"><div class="ball"></div></div></button>
|
|
33
|
+
</div>`,a.stage.append(r),a.stage.removeAttribute("aria-hidden"),r.querySelector(".sm").removeAttribute("aria-hidden");let y=r.querySelector(".sm-bulbs"),w=22;for(let e=0;e<w;e++){let t=document.createElement("i"),f=e/w*4,n=Math.floor(f),o=f-n,l=n===0?[o,0]:n===1?[1,o]:n===2?[1-o,1]:[0,1-o];t.style.left=`calc(${l[0]*100}% - 4px)`,t.style.top=`calc(${l[1]*100}% - 4px)`,y.append(t)}let p=[...r.querySelectorAll(".sm-strip")],u=r.querySelector(".sm-lever"),$=r.querySelector(".spins"),x=0,k=-10,d=!1,b=h*g.length,v=()=>{d||(d=!0,x++,$.textContent=`SPINS ${x}`,k=performance.now()/1e3,u.classList.add("pulled"),setTimeout(()=>u.classList.remove("pulled"),380),a.invalidate())};u.addEventListener("click",v),a.onWindow("keydown",e=>{e.code==="Space"&&a.visible()&&!(document.activeElement instanceof HTMLInputElement)&&(e.preventDefault(),v())}),a.reducedMotion||setTimeout(v,500);let E=()=>p[0].firstElementChild.getBoundingClientRect().height,S=()=>p.forEach(e=>e.style.transform=`translateY(${-b*E()}px)`);return S(),{frame(e){let t=performance.now()/1e3,s=E(),f=t-k,n=!1;p.forEach((l,m)=>{let L=1.6+m*.5,c=Math.min(1,f/L);c<1&&(n=!0);let q=c<1?1-Math.pow(1-c,3)+Math.sin(c*Math.PI)*.02:1,C=d||c<1?-b*s*q:-b*s;l.style.transform=`translateY(${C}px)`,l.style.filter=c<.85&&d?`blur(${(1-c)*2.5}px)`:"none"}),d&&!n&&(d=!1);let o=Math.floor(e*(n?14:3));y.querySelectorAll("i").forEach((l,m)=>l.classList.toggle("on",n?(m+o)%3===0:(m+o)%2===0))},resize:S,destroy(){r.remove()}}}};export{H as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as F,b as K,d as D,e as W,f as Y,g as _}from"./chunk-JLRXT2AZ.js";import{a as q}from"./chunk-4ZBXB36L.js";import{f as B}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var te={id:"snake",name:"Snake",description:"A snake winds around a maze shaped like the 404. It hunts by itself until you grab the arrow keys or swipe.",category:"Games",kind:"2d",motion:"game",tags:["canvas","game","playable","snake","retro","keyboard","touch"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Arrow keys or swipe",title:"The page got eaten.",message:"Our snake swallowed it whole. Take control and try to get it back, or slither home.",actions:[{label:"Slither home",href:"/",variant:"primary"}]},params:{bg:"#06110b",grid:"#0b1f14",wall:"#1b3a28",snake:"#3dff8a",head:"#d9ffe9",food:"#ff4d6d",text:"#c9ffd9",speed:13},theme:{bg:"#06110b",fg:"#c9ffd9",accent:"#3dff8a","accent-fg":"#06110b","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Neon Green",presets:{neon:{name:"Synthwave",params:{bg:"#0c0018",grid:"#140026",wall:"#3a0f5a",snake:"#ff3bd4",head:"#ffe6fb",food:"#3bffe6",text:"#ffd6f7"},theme:{bg:"#0c0018",fg:"#ffe6fb",accent:"#ff3bd4","accent-fg":"#fff"}},desert:{name:"Desert",params:{bg:"#f2d9a8",grid:"#ead0a0",wall:"#c99a5a",snake:"#5a3a12",head:"#2a1a05",food:"#d6281a",text:"#3a2410"},theme:{bg:"#f2d9a8",fg:"#2a1a05",accent:"#2a1a05","accent-fg":"#f2d9a8"}},mono:{name:"Monochrome",params:{bg:"#0a0a0a",grid:"#111111",wall:"#2a2a2a",snake:"#f2f2f2",head:"#ffffff",food:"#f2f2f2",text:"#f2f2f2"},theme:{bg:"#0a0a0a",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#000"}},nokia:{name:"Brick Phone",params:{bg:"#c7d3a2",grid:"#bccb93",wall:"#5c6b3b",snake:"#2f3a1c",head:"#1a210f",food:"#2f3a1c",text:"#2f3a1c",speed:10},theme:{bg:"#c7d3a2",fg:"#2f3a1c",accent:"#2f3a1c","accent-fg":"#c7d3a2"}},candy:{name:"Candy",params:{bg:"#fff3f8",grid:"#ffe6f0",wall:"#ffc2da",snake:"#ff4fa3",head:"#c2185b",food:"#3bb9ff",text:"#7a1442"},theme:{bg:"#fff3f8",fg:"#4a0d29",accent:"#ff4fa3","accent-fg":"#fff"}},ocean:{name:"Deep Blue",params:{bg:"#03101f",grid:"#06192e",wall:"#0d2c4a",snake:"#3bd6ff",head:"#e6faff",food:"#ffcc3b",text:"#bfeeff"},theme:{bg:"#03101f",fg:"#d6f4ff",accent:"#3bd6ff","accent-fg":"#03101f"}}},css:_,setup(P){let i=P.params,d=q(P),h=F(P,{pointerPlays:!1}),O=P.random,j=P.copy.code||"404",r=0,g=0,f=0,u=0,p=0,R=[],m=[],y=[1,0],A=[1,0],k=[0,0],I=0,v=0,C=W("snake"),S=0,G=!1,M=(a,t)=>t*r+a;function N(){let a=d.h*.6;f=Math.max(14,Math.min(26,Math.floor(Math.min(d.w/46,a/22)))),r=Math.floor((d.w-32)/f),g=Math.floor(a/f),u=Math.floor((d.w-r*f)/2),p=Math.max(14,Math.floor(d.h*.05));let t=Math.round(r*.7),e=Math.round(g*.62),s=K(j,t,e,900);R=new Array(r*g).fill(!1);let l=Math.floor((r-t)/2),n=Math.floor((g-e)/2)+1;for(let c=0;c<e;c++)for(let b=0;b<t;b++)s[c*t+b]&&(R[M(l+b,n+c)]=!0);H()}function x(a,t){return a>=0&&t>=0&&a<r&&t<g&&!R[M(a,t)]}function H(){let a=2,t=1;for(;!x(a,t)||!x(a-1,t)||!x(a-2,t);)t++;m=[[a,t],[a-1,t],[a-2,t]],y=[1,0],A=[1,0],v=0,z()}function z(){for(let a=0;a<500;a++){let t=Math.floor(O()*r),e=Math.floor(O()*g);if(x(t,e)&&!m.some(([s,l])=>s===t&&l===e)){k=[t,e];return}}}function J(){let[a,t]=m[0],e=new Set(m.slice(0,-1).map(([o,w])=>M(o,w))),s=new Int32Array(r*g).fill(-1),l=M(a,t);s[l]=l;let n=[l],c=M(k[0],k[1]),b=[[1,0],[-1,0],[0,1],[0,-1]];for(;n.length;){let o=n.shift();if(o===c)break;let w=o%r,Q=o/r|0;for(let[U,V]of b){let T=w+U,$=Q+V;if(!x(T,$))continue;let E=M(T,$);s[E]!==-1||e.has(E)||(s[E]=o,n.push(E))}}if(s[c]!==-1){let o=c;for(;s[o]!==l;)o=s[o];return[o%r-a,(o/r|0)-t]}for(let o of b)if(x(a+o[0],t+o[1])&&!e.has(M(a+o[0],t+o[1])))return o;return y}function L(){if(h.playing){let l=h.swipe?{left:[-1,0],right:[1,0],up:[0,-1],down:[0,1]}[h.swipe]:h.left?[-1,0]:h.right?[1,0]:h.up?[0,-1]:h.down?[0,1]:null;h.swipe=null,l&&!(l[0]===-y[0]&&l[1]===-y[1])&&(A=l)}else A=J();y=A;let[a,t]=m[0],e=a+y[0],s=t+y[1];if(!x(e,s)||m.some(([l,n],c)=>c<m.length-1&&l===e&&n===s)){v>C&&Y("snake",C=v),S=1.2;return}m.unshift([e,s]),e===k[0]&&s===k[1]?(v+=10,z()):m.pop()}return N(),{resize(){d.reset(),N()},frame(a,t){let e=d.g;if(d.reset(),h.playing&&!G&&(G=!0,H()),S>0)S-=t,S<=0&&H();else if(t>0&&(!P.reducedMotion||h.playing)){I+=t;let n=1/(i.speed*(h.playing?.85:1.4));for(;I>n&&(I-=n,L(),!(S>0)););}e.fillStyle=i.bg,e.fillRect(0,0,d.w,d.h),e.fillStyle=i.grid;for(let n=0;n<g;n++)for(let c=0;c<r;c++)(c+n)%2===0&&e.fillRect(u+c*f,p+n*f,f,f);e.fillStyle=i.wall;for(let n=0;n<R.length;n++)R[n]&&e.fillRect(u+n%r*f+1,p+(n/r|0)*f+1,f-2,f-2);let s=.75+.25*Math.sin(a*6);e.fillStyle=i.food,e.shadowColor=i.food,e.shadowBlur=14,e.beginPath(),e.arc(u+k[0]*f+f/2,p+k[1]*f+f/2,f/2.6*s,0,Math.PI*2),e.fill(),e.shadowBlur=0,m.forEach(([n,c],b)=>{let o=b/m.length;e.fillStyle=b===0?i.head:B(i.snake,1-o*.55);let w=b===0?1:2+o*2;e.fillRect(u+n*f+w,p+c*f+w,f-w*2,f-w*2)}),S>0&&Math.floor(a*8)%2&&(e.fillStyle=B(i.food,.25),e.fillRect(u,p,r*f,g*f));let l=Math.max(10,Math.min(14,d.w/90));D(e,`SCORE ${v}`,u,p+g*f+8,l,i.text),D(e,`HI ${C}`,u+r*f,p+g*f+8,l,i.text,"right"),!h.playing&&Math.floor(a*1.6)%2===0&&D(e,"DEMO \xB7 PRESS AN ARROW KEY",d.w/2,p+g*f+8,l,B(i.text,.75),"center")}}}};export{te as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as I}from"./chunk-4ZBXB36L.js";import{f as w}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var q={id:"snow-globe",name:"Snow Globe",description:"A tiny town inside a snow globe, with a little signpost pointing to 404. Click or drag to shake it and watch the snow settle.",category:"Playful",kind:"2d",motion:"interactive",tags:["canvas","snow","winter","christmas","cozy","interactive","toy"],layout:"right",copy:{eyebrow:"Shake it",title:"Snowed under.",message:"This page is somewhere under all that snow. Shake the globe all you like. It isn't in there.",actions:[{label:"Back to the warm homepage",href:"/",variant:"primary"}]},params:{bg:"#2a1f3d",bg2:"#0f0b18",water:"#bfe3ff",base:"#6b3a1e",flakes:"#ffffff",house:"#d64545"},theme:{bg:"#1b142a",fg:"#f6f0ff",accent:"#f6f0ff","accent-fg":"#1b142a"},presetName:"Winter Night",presets:{rose:{name:"Rose",params:{bg:"#ffe6ec",bg2:"#ffc2d1",water:"#fff0f4",base:"#c2185b",house:"#7a1f4a"},theme:{bg:"#ffe6ec",fg:"#3a0a1a",accent:"#3a0a1a","accent-fg":"#fff"}},ocean:{name:"Seaside",params:{bg:"#06243a",bg2:"#010a14",water:"#bfe7ff",base:"#14466b",house:"#ffd23f"},theme:{bg:"#06243a",fg:"#e6f6ff",accent:"#e6f6ff","accent-fg":"#06243a"}},mint:{name:"Mint",params:{bg:"#e6f5ef",bg2:"#c7e6da",water:"#d9fff2",base:"#2f6b57",house:"#e86a5a"},theme:{bg:"#e6f5ef",fg:"#123327",accent:"#123327","accent-fg":"#fff"}},gold:{name:"Gilded",params:{bg:"#1a1206",bg2:"#050300",water:"#fff1c9",base:"#a8822e",flakes:"#ffd77a",house:"#1d3b2a"},theme:{bg:"#120c04",fg:"#fff3d6",accent:"#ffd77a","accent-fg":"#120c04"}}},css:`& .lp-overlay{padding-right:clamp(24px,8cqw,140px)}& .lp-head,& .lp-body{max-width:min(460px,42cqw)}
|
|
2
|
+
@container (max-width:760px){& .lp-head,& .lp-body{max-width:none}& .lp-overlay{justify-content:flex-end}}`,setup(n){let c=n.params,f=I(n),p=n.random,k=Array.from({length:420},()=>({x:p()*2-1,y:p()*2-1,vx:0,vy:0,s:.4+p()})),v={x:0,y:0,v:0},m=null,C=2,x=s=>{for(let i of k)i.vx+=(p()-.5)*s,i.vy-=p()*s*1.2;v.v=s*.6};return n.on("pointerdown",()=>x(3)),n.on("pointermove",s=>{if(!s.buttons)return m=null;if(m){let i=Math.hypot(n.pointer.x-m.x,n.pointer.y-m.y);i>4&&x(Math.min(4,i*.05))}m={x:n.pointer.x,y:n.pointer.y}}),{resize(){f.reset()},frame(s,i){let e=f.g;f.reset();let u=f.w<760,a=u?Math.min(f.w*.36,f.h*.26):Math.min(f.h*.32,f.w*.22),R=u?f.w/2:f.w*.32,G=u?f.h*.3:f.h*.44;!n.pointer.engaged&&!n.reducedMotion&&s>C&&(C=s+9,x(3)),v.v*=Math.exp(-4*i);let A=Math.sin(s*40)*v.v*8,l=R+A,o=G,M=e.createRadialGradient(l,o,a*.3,l,o,Math.max(f.w,f.h)*.8);M.addColorStop(0,c.bg),M.addColorStop(1,c.bg2),e.fillStyle=M,e.fillRect(0,0,f.w,f.h),e.fillStyle="rgba(0,0,0,.35)",e.beginPath(),e.ellipse(l,o+a*1.18,a*.95,a*.12,0,0,Math.PI*2),e.fill();let S=e.createLinearGradient(l-a,0,l+a,0);S.addColorStop(0,c.base),S.addColorStop(.5,w("#ffffff",.25)),S.addColorStop(1,c.base),e.fillStyle=c.base,e.beginPath(),e.moveTo(l-a*.78,o+a*.72),e.lineTo(l+a*.78,o+a*.72),e.lineTo(l+a*.92,o+a*1.15),e.lineTo(l-a*.92,o+a*1.15),e.closePath(),e.fill(),e.fillStyle=S,e.globalAlpha=.35,e.fill(),e.globalAlpha=1,e.fillStyle="rgba(255,255,255,.85)",e.font=`700 ${a*.1}px Georgia,serif`,e.textAlign="center",e.fillText(`~ ${n.copy.code} ~`,l,o+a*1),e.save(),e.beginPath(),e.arc(l,o,a,0,Math.PI*2),e.clip();let P=e.createLinearGradient(0,o-a,0,o+a);P.addColorStop(0,w(c.water,.25)),P.addColorStop(1,w(c.water,.55)),e.fillStyle=P,e.fillRect(l-a,o-a,a*2,a*2),e.fillStyle="#f7fbff",e.beginPath(),e.ellipse(l,o+a*.72,a*.95,a*.32,0,Math.PI,0),e.fill();for(let[t,r]of[[-.5,.9],[-.32,.65],[.55,.8]]){let d=l+t*a,y=o+a*.58;e.fillStyle="#1f5a3a";for(let h=0;h<3;h++)e.beginPath(),e.moveTo(d,y-a*(.28+h*.1)*r-a*.1),e.lineTo(d-a*(.14-h*.03)*r,y-a*h*.1*r),e.lineTo(d+a*(.14-h*.03)*r,y-a*h*.1*r),e.fill();e.fillStyle="#fff",e.beginPath(),e.moveTo(d,y-a*.48*r),e.lineTo(d-a*.04*r,y-a*.4*r),e.lineTo(d+a*.04*r,y-a*.4*r),e.fill()}let g=l-a*.02,b=o+a*.48;e.fillStyle=c.house,e.fillRect(g-a*.16,b-a*.2,a*.32,a*.2),e.fillStyle="#fff",e.beginPath(),e.moveTo(g-a*.2,b-a*.2),e.lineTo(g,b-a*.36),e.lineTo(g+a*.2,b-a*.2),e.fill(),e.fillStyle="#ffd77a",e.fillRect(g-a*.1,b-a*.14,a*.06,a*.06),e.fillRect(g+a*.04,b-a*.14,a*.06,a*.06),e.fillStyle="#6b3a1e",e.fillRect(l+a*.28,o+a*.3,a*.025,a*.3),e.fillStyle="#c98a4a",e.beginPath(),e.moveTo(l+a*.22,o+a*.28),e.lineTo(l+a*.46,o+a*.28),e.lineTo(l+a*.5,o+a*.33),e.lineTo(l+a*.46,o+a*.38),e.lineTo(l+a*.22,o+a*.38),e.fill(),e.fillStyle="#2a1406",e.font=`700 ${a*.07}px Inter,Arial,sans-serif`,e.fillText(n.copy.code,l+a*.35,o+a*.355);for(let t of k){if(i>0){if(t.vy+=.25*i,t.vx*=Math.exp(-1.5*i),t.vy*=Math.exp(-1.5*i),t.vy=Math.min(t.vy,.12*t.s),t.x+=(t.vx+Math.sin(s+t.s*9)*.02)*i,t.y+=t.vy*i,t.x*t.x+t.y*t.y>.92){let r=Math.hypot(t.x,t.y);t.x*=.95/r,t.y*=.95/r,t.vx*=-.3,t.vy*=-.3}t.y>.62-Math.abs(t.x)*.1&&(t.y=.62-Math.abs(t.x)*.1,t.vy=0,t.vx=0)}e.fillStyle=w(c.flakes,.9),e.beginPath(),e.arc(l+t.x*a,o+t.y*a,1.2+t.s*1.4,0,Math.PI*2),e.fill()}e.restore(),e.strokeStyle="rgba(255,255,255,.35)",e.lineWidth=2,e.beginPath(),e.arc(l,o,a,0,Math.PI*2),e.stroke();let T=e.createRadialGradient(l-a*.45,o-a*.45,0,l-a*.45,o-a*.45,a*.6);T.addColorStop(0,"rgba(255,255,255,.5)"),T.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=T,e.beginPath(),e.arc(l,o,a,0,Math.PI*2),e.fill(),e.strokeStyle="rgba(255,255,255,.55)",e.lineWidth=a*.03,e.lineCap="round",e.beginPath(),e.arc(l,o,a*.86,Math.PI*1.08,Math.PI*1.32),e.stroke()}}}};export{q as default};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var s={id:"soft-blobs",name:"Soft Blobs",description:"Blurred colour blobs drifting slowly behind a frosted card. Pure CSS animation, so it costs almost nothing to run.",category:"Simple",kind:"2d",motion:"live",tags:["simple","gradient","blobs","glass","frosted","saas","fast","light"],layout:"center",copy:{eyebrow:"",title:"Page not found",message:"The page you\u2019re looking for doesn\u2019t exist or has been moved.",actions:[{label:"Go home",href:"/"},{label:"Contact",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{colors:["#a78bfa","#60a5fa","#f472b6"],speed:1,card:!0},theme:{bg:"#f8f7ff",fg:"#1e1b4b",accent:"#1e1b4b","accent-fg":"#ffffff","code-size":"clamp(64px,11cqw,120px)","code-weight":"800","code-color":"#1e1b4b"},presetName:"Lavender",presets:{peach:{name:"Peach",params:{colors:["#fdba74","#fda4af","#fde68a"]},theme:{bg:"#fffaf5",fg:"#431407",accent:"#431407","code-color":"#431407"}},aqua:{name:"Aqua",params:{colors:["#5eead4","#38bdf8","#a3e635"]},theme:{bg:"#f0fdfa",fg:"#042f2e",accent:"#042f2e","code-color":"#042f2e"}},night:{name:"Night",params:{colors:["#7c3aed","#2563eb","#db2777"]},theme:{bg:"#07071a",fg:"#eef2ff",accent:"#eef2ff","accent-fg":"#07071a","code-color":"#eef2ff"}}},css:`
|
|
2
|
+
& .sb{position:absolute;inset:-10%;filter:blur(clamp(50px,8cqw,110px));opacity:.75}
|
|
3
|
+
& .sb i{position:absolute;width:45%;aspect-ratio:1;border-radius:50%;animation:sb-drift calc(18s / var(--sp)) ease-in-out infinite alternate}
|
|
4
|
+
& .sb i:nth-child(1){left:12%;top:10%;background:var(--c0)}
|
|
5
|
+
& .sb i:nth-child(2){right:8%;top:30%;background:var(--c1);animation-delay:calc(-6s / var(--sp));animation-duration:calc(22s / var(--sp))}
|
|
6
|
+
& .sb i:nth-child(3){left:30%;bottom:2%;background:var(--c2);animation-delay:calc(-11s / var(--sp));animation-duration:calc(26s / var(--sp))}
|
|
7
|
+
@keyframes sb-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,-8%) scale(1.15)}100%{transform:translate(-10%,10%) scale(.92)}}
|
|
8
|
+
&.sb-still .sb i{animation:none}
|
|
9
|
+
& .lp-code{letter-spacing:-.05em;line-height:.9;margin-bottom:8px}
|
|
10
|
+
& .lp-title{font-weight:700;font-size:clamp(24px,3.4cqw,40px)}
|
|
11
|
+
&.sb-card .lp-head,&.sb-card .lp-body{position:relative}
|
|
12
|
+
&.sb-card .lp-overlay::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(520px,calc(100% - 32px));height:min(460px,calc(100% - 32px));
|
|
13
|
+
border-radius:28px;background:color-mix(in srgb,var(--lp-bg) 55%,transparent);border:1px solid color-mix(in srgb,#fff 55%,transparent);
|
|
14
|
+
backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
|
|
15
|
+
`,setup(a){let t=a.params,e=document.createElement("div");return e.className="sb",e.innerHTML="<i></i><i></i><i></i>",t.colors.slice(0,3).forEach((o,r)=>e.style.setProperty(`--c${r}`,o)),e.style.setProperty("--sp",String(Math.max(.05,t.speed))),a.stage.append(e),a.root.classList.toggle("sb-card",t.card),a.root.classList.toggle("sb-still",a.reducedMotion),{destroy:()=>e.remove()}}};export{s as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as v}from"./chunk-4ZBXB36L.js";import{f as l}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var I={id:"solar-system",name:"Missing Planet",description:"An orrery of a little solar system. Every planet circles on schedule, except the fourth orbit, which is empty and labelled 404.",category:"Space",kind:"2d",motion:"live",tags:["canvas","space","orbits","planets","science","minimal","dark"],layout:"left",copy:{eyebrow:"Planet not found",title:"There's a gap in the orbit.",message:"Something should be circling the fourth ring. It's the page you were looking for, and it's gone.",actions:[{label:"Return to Earth",href:"/",variant:"primary"}]},params:{bg:"#05060f",sun:"#ffcf5a",orbit:"#3a3f5a",planets:["#b8b8c0","#e8b86b","#3b8fe6","#e2574c","#d9a066","#e6d29a","#7fd3e6","#4f6bff"],label:"#ff5a5a"},theme:{bg:"#05060f",fg:"#eef0ff",accent:"#eef0ff","accent-fg":"#05060f"},presetName:"Night",presets:{paper:{name:"Orrery Print",params:{bg:"#f2ede2",sun:"#e4572e",orbit:"#b9ad96",planets:["#2a2a2a"],label:"#e4572e"},theme:{bg:"#f2ede2",fg:"#1f1a12",accent:"#1f1a12","accent-fg":"#fff"}},neon:{name:"Neon Orbits",params:{bg:"#060010",sun:"#ff3bd4",orbit:"#3a1a5a",planets:["#3bd6ff","#ffe14d","#3dff8a","#ff7a3d"],label:"#3bd6ff"},theme:{bg:"#060010",accent:"#ff3bd4","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(i){let o=i.params,a=v(i),c=i.random,g=[],y=()=>g=Array.from({length:220},()=>[c()*a.w,c()*a.h,c()]);return y(),{resize(){a.reset(),y()},frame(R){let t=a.g;a.reset(),t.fillStyle=o.bg,t.fillRect(0,0,a.w,a.h);for(let[e,n,m]of g)t.fillStyle=l("#ffffff",.2+m*.5),t.fillRect(e,n,1.2,1.2);let d=a.w<760,r=d?a.w/2:a.w*.64,s=d?a.h*.32:a.h*.5,p=.42+i.pointer.sy*.15,u=d?Math.min(a.w*.46,a.h*.5):Math.min(a.w*.34,a.h*.8),x=8,h=[];for(let e=0;e<x;e++){let n=u*(.18+e/(x-1)*.82);if(t.strokeStyle=e===3?l(o.label,.7):l(o.orbit,.9),t.setLineDash(e===3?[6,8]:[]),t.lineWidth=e===3?1.5:1,t.beginPath(),t.ellipse(r,s,n,n*p,0,0,Math.PI*2),t.stroke(),t.setLineDash([]),e===3){let M=r+Math.cos(-.6)*n,P=s+Math.sin(-.6)*n*p;t.strokeStyle=o.label,t.lineWidth=2,t.beginPath(),t.arc(M,P,9,0,Math.PI*2),t.stroke(),t.fillStyle=o.label,t.font="700 12px ui-monospace,Menlo,monospace",t.textAlign="left",t.fillText(`${i.copy.code} \xB7 not found`,M+14,P+4);continue}let m=1.2/Math.pow(e+1,1.2),b=R*m+e*1.7;h.push({x:r+Math.cos(b)*n,y:s+Math.sin(b)*n*p,r:4+e*5%9+(e===5?6:0),col:o.planets[e%o.planets.length],z:Math.sin(b)})}let w=u*.08,S=e=>{let n=t.createRadialGradient(e.x-(e.x-r)*.02-e.r*.3,e.y-e.r*.3,e.r*.1,e.x,e.y,e.r);n.addColorStop(0,e.col),n.addColorStop(1,l(e.col,.35)),t.fillStyle=n,t.beginPath(),t.arc(e.x,e.y,e.r,0,Math.PI*2),t.fill()};h.filter(e=>e.z<0).forEach(S);let f=t.createRadialGradient(r,s,0,r,s,w*3);f.addColorStop(0,o.sun),f.addColorStop(.33,o.sun),f.addColorStop(1,l(o.sun,0)),t.fillStyle=f,t.beginPath(),t.arc(r,s,w*3,0,Math.PI*2),t.fill(),h.filter(e=>e.z>=0).forEach(S)}}}};export{I as default};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var o=l=>l.replace(/[&<>"]/g,r=>({"&":"&","<":"<",">":">",'"':"""})[r]),M={id:"split-flap",name:"Departures Board",description:"An airport split-flap board. Every letter clatters into place. Your page is cancelled, but the other flights still board.",category:"Signs & Displays",kind:"2d",motion:"live",tags:["dom","css-3d","split-flap","airport","travel","typography"],layout:"none",copy:{title:"Your page has been cancelled.",message:"We're sorry for the inconvenience. Please choose another destination below.",actions:[{label:"Home",href:"/",variant:"primary"},{label:"Blog",href:"/blog",variant:"secondary"},{label:"Contact",href:"/contact",variant:"secondary"}]},params:{heading:"DEPARTURES",status:"CANCELLED",alphabet:" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:-/.",flapMs:42,board:"#111214",cell:"#1d1e21",ink:"#f4f1e6",hot:"#ffcc33"},theme:{bg:"#08090a",fg:"#f4f1e6",accent:"#ffcc33","accent-fg":"#111"},presetName:"Airport",presets:{delayed:{name:"Delayed",title:"Your page is delayed. Indefinitely.",params:{status:"DELAYED",hot:"#ff5a3c"},theme:{accent:"#ff5a3c","accent-fg":"#fff"}},gate:{name:"Gate Change",title:"Your page has moved to an unknown gate.",params:{heading:"GATE CHANGES",status:"GATE ???",board:"#1d1d1f",cell:"#2a2a2d",ink:"#ffd23f",hot:"#ffffff"},theme:{accent:"#ffd23f","accent-fg":"#111"}},ferry:{name:"Ferry Terminal",title:"Your page missed the boat.",params:{heading:"SAILINGS",status:"SAILED",board:"#0b3a4a",cell:"#0f4a5e",ink:"#e6f9ff",hot:"#7fe3ff"},theme:{bg:"#06242e",accent:"#7fe3ff","accent-fg":"#06242e"}},train:{name:"Rail Station",title:"This train no longer stops here.",params:{heading:"TRAINS",status:"TERMINATED",board:"#0d2a52",cell:"#123a6e",ink:"#ffffff",hot:"#ffdd00"},theme:{bg:"#06162b",accent:"#ffdd00","accent-fg":"#06162b"}},arrivals:{name:"Arrivals",title:"Your page never landed.",params:{heading:"ARRIVALS",status:"DIVERTED",hot:"#ff6b3d"},theme:{accent:"#ff6b3d"}},white:{name:"Terminal White",params:{board:"#e9e7e1",cell:"#fbfaf7",ink:"#151515",hot:"#e0311f"},theme:{bg:"#d9d6cf",fg:"#151515",accent:"#151515","accent-fg":"#fff"}},green:{name:"Platform Green",params:{heading:"PLATFORMS",status:"DELAYED",board:"#0c1f17",cell:"#12301f",ink:"#c6ffd9",hot:"#7dff9e"},theme:{bg:"#06120d",accent:"#7dff9e","accent-fg":"#06120d"}}},css:`
|
|
2
|
+
& .sf-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3cqh,30px);padding:clamp(14px,4cqw,48px)}
|
|
3
|
+
& .sf-board{--c:clamp(13px,2.35cqw,40px);background:var(--board);padding:calc(var(--c)*.9) calc(var(--c)*.9) calc(var(--c)*.7);border-radius:calc(var(--c)*.35);
|
|
4
|
+
box-shadow:0 40px 90px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);max-width:100%;overflow:hidden}
|
|
5
|
+
& .sf-head{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ink);font:600 calc(var(--c)*.62)/1 var(--lp-font);letter-spacing:.3em;margin-bottom:calc(var(--c)*.6);opacity:.9}
|
|
6
|
+
& .sf-head svg{width:calc(var(--c)*1.1);height:calc(var(--c)*1.1);fill:var(--hot)}
|
|
7
|
+
& .sf-cols,.sf-row{display:grid;grid-template-columns:var(--cols);column-gap:calc(var(--c)*.55);align-items:center}
|
|
8
|
+
& .sf-cols{color:color-mix(in srgb,var(--ink) 55%,transparent);font:500 calc(var(--c)*.42)/1 var(--lp-font);letter-spacing:.18em;margin-bottom:calc(var(--c)*.35)}
|
|
9
|
+
& .sf-row{padding:calc(var(--c)*.18) 0;text-decoration:none;color:inherit;border-radius:4px;outline-offset:3px}
|
|
10
|
+
& a.sf-row:hover .ch{filter:brightness(1.25)}
|
|
11
|
+
& .sf-word{display:flex;gap:calc(var(--c)*.07)}
|
|
12
|
+
& .ch{position:relative;width:calc(var(--c)*.72);height:calc(var(--c)*1.12);perspective:calc(var(--c)*6);font:700 var(--c)/1 var(--lp-font-mono);color:var(--ink)}
|
|
13
|
+
& .ch.hot{color:var(--hot)}
|
|
14
|
+
& .ch>span{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--cell);backface-visibility:hidden}
|
|
15
|
+
& .ch>span>i{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center;font-style:normal}
|
|
16
|
+
& .ch .t,.ch .lt{top:0;border-radius:3px 3px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--cell) 85%,#fff),var(--cell))}
|
|
17
|
+
& .ch .b,.ch .lb{bottom:0;border-radius:0 0 3px 3px}
|
|
18
|
+
& .ch .b>i,.ch .lb>i{top:-100%}
|
|
19
|
+
& .ch .t>i,.ch .lt>i{top:0}
|
|
20
|
+
& .ch::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(0,0,0,.55);z-index:3}
|
|
21
|
+
& .ch .lt{transform-origin:50% 100%;z-index:2;animation:sf-t var(--ms) ease-in forwards}
|
|
22
|
+
& .ch .lb{transform-origin:50% 0;z-index:2;transform:rotateX(90deg);animation:sf-b var(--ms) var(--ms) ease-out forwards}
|
|
23
|
+
@keyframes sf-t{to{transform:rotateX(-90deg);filter:brightness(.6)}}
|
|
24
|
+
@keyframes sf-b{from{transform:rotateX(90deg);filter:brightness(1.4)}to{transform:rotateX(0)}}
|
|
25
|
+
& .sf-copy{text-align:center;max-width:46ch}
|
|
26
|
+
& .sf-copy h1{margin:0;font-size:clamp(22px,3cqw,36px);font-weight:600;letter-spacing:-.02em}
|
|
27
|
+
& .sf-copy p{margin:.6em 0 0;color:var(--lp-muted);font-size:15px;line-height:1.55}
|
|
28
|
+
& .blink{animation:sf-blink 1.1s steps(1) infinite}
|
|
29
|
+
@keyframes sf-blink{50%{opacity:.25}}
|
|
30
|
+
@container (max-width:700px){& .sf-hide{display:none}}
|
|
31
|
+
@media (prefers-reduced-motion:reduce){& .ch .lt,& .ch .lb{animation:none;display:none}& .blink{animation:none}}
|
|
32
|
+
`,setup(l){let r=l.params,f=l.copy,m=l.width<700,s={time:5,dest:m?9:12,flight:6,gate:4,status:Math.max(9,r.status.length)},d=(e,t)=>[...(e.toUpperCase()+" ".repeat(t)).slice(0,t)].map(a=>r.alphabet.includes(a)?a:" ").join(""),E=new Date,v=e=>{let t=new Date(E.getTime()+e*6e4);return`${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}`},k=typeof location<"u"?location.pathname.split("/").filter(Boolean).pop()??"PAGE":"PAGE",u=[{time:v(-4),dest:k.replace(/[^a-z0-9]/gi," ")||"YOUR PAGE",flight:`LP${f.code}`,gate:"--",status:r.status,hot:!0,href:null},...f.actions.slice(0,4).map((e,t)=>({time:v(6+t*9),dest:e.label,flight:`LP${String(100+t*37).padStart(3,"0")}`,gate:`${String.fromCharCode(65+t)}${t+1}`,status:t===0?"BOARDING":"ON TIME",hot:!1,href:e.href??"/"}))],w=m?`${s.time}fr ${s.dest}fr ${s.status}fr`:`${s.time}fr ${s.dest}fr ${s.flight}fr ${s.gate}fr ${s.status}fr`,i=document.createElement("div");i.className="sf-wrap",i.style.setProperty("--board",r.board),i.style.setProperty("--cell",r.cell),i.style.setProperty("--ink",r.ink),i.style.setProperty("--hot",r.hot),i.style.setProperty("--ms",`${r.flapMs}ms`);let p=(e,t,a)=>`<span class="sf-word" data-k="${e}" data-len="${t}" data-hot="${a?1:0}"></span>`;i.innerHTML=`<div class="sf-board" style="--cols:${w}">
|
|
33
|
+
<div class="sf-head"><span>${o(r.heading)}</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg></div>
|
|
34
|
+
<div class="sf-cols" aria-hidden="true"><span>TIME</span><span>DESTINATION</span>${m?"":"<span>FLIGHT</span><span>GATE</span>"}<span>REMARKS</span></div>
|
|
35
|
+
${u.map((e,t)=>`<${e.href?`a href="${o(e.href)}" data-href="${o(e.href)}"`:"div"} class="sf-row" aria-label="${o(`${e.dest} ${e.status}`)}">${p(`${t}t`,s.time,!1)}${p(`${t}d`,s.dest,e.hot)}${m?"":p(`${t}f`,s.flight,!1)+p(`${t}g`,s.gate,!1)}${p(`${t}s`,s.status,e.hot)}</${e.href?"a":"div"}>`).join("")}
|
|
36
|
+
</div>
|
|
37
|
+
<div class="sf-copy"><h1><span class="lp-sr">Error ${o(f.code)}: </span>${o(f.title)}</h1><p>${o(f.message)}</p></div>`,l.root.append(i),i.querySelectorAll("a[data-href]").forEach(e=>e.addEventListener("click",t=>{t.metaKey||t.ctrlKey||(t.preventDefault(),l.navigate(e.dataset.href,t))}));let h=r.alphabet,b=[],y=e=>`<span class="t"><i>${o(e)}</i></span><span class="b"><i>${o(e)}</i></span>`,c={};u.forEach((e,t)=>{c[`${t}t`]=d(e.time,s.time),c[`${t}d`]=d(e.dest,s.dest),c[`${t}f`]=d(e.flight,s.flight),c[`${t}g`]=d(e.gate,s.gate),c[`${t}s`]=d(e.status,s.status)}),i.querySelectorAll(".sf-word").forEach(e=>{let t=c[e.dataset.k],a=e.dataset.hot==="1";for(let n=0;n<t.length;n++){let g=document.createElement("span");g.className="ch"+(a?" hot":"");let x=l.reducedMotion?t[n]:" ";g.innerHTML=y(x),g.setAttribute("aria-hidden","true"),e.append(g),b.push({el:g,cur:x,target:t[n],next:.25+Math.random()*.9+n*.03})}e.dataset.k.endsWith("s")&&a&&e.classList.add("blink-later")});let A=e=>{let t=h.indexOf(e.cur),a=h[(t+1)%h.length],n=e.el;n.innerHTML=`<span class="t"><i>${o(a)}</i></span><span class="b"><i>${o(e.cur)}</i></span><span class="lt"><i>${o(e.cur)}</i></span><span class="lb"><i>${o(a)}</i></span>`,e.cur=a},$=14;return{frame(e){if(l.reducedMotion)return;let t=!1;for(let a of b)a.cur!==a.target&&(t=!0,e>=a.next&&(A(a),a.next=e+r.flapMs*1.25/1e3));if(!t&&(i.querySelectorAll(".blink-later").forEach(a=>a.classList.add("blink")),e>$)){$=e+12;let a=1+Math.floor(Math.random()*(u.length-1));for(let n of b)n.el.parentElement?.dataset.k?.startsWith(String(a))&&(n.cur=h[Math.floor(Math.random()*h.length)],n.el.innerHTML=y(n.cur),n.next=e+Math.random()*.5)}},destroy(){i.remove()}}}};export{M as default};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import{a as t,c as s,d as o,e as i}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var r={id:"split-panel",name:"Split Panel",description:"Two halves: the explanation and buttons on one side, a solid colour block with a huge number on the other. Stacks on phones.",category:"Simple",kind:"2d",motion:"static",tags:["simple","split","two-column","bold","static","fast","brand"],layout:"none",copy:{eyebrow:"Error 404",title:"Looks like you\u2019re lost.",message:"The page you are looking for is not available. It might have been moved or deleted.",actions:[{label:"Go to homepage",href:"/"},{label:"Contact us",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{panel:"#ff5a36",panelText:"#ffffff",flip:!1},theme:{bg:"#ffffff",fg:"#111111",accent:"#111111","accent-fg":"#ffffff",radius:"6px"},presetName:"Coral",presets:{forest:{name:"Forest",params:{panel:"#14532d",panelText:"#bbf7d0"},theme:{bg:"#f7f7f2",fg:"#14231a",accent:"#14532d","accent-fg":"#fff"}},ink:{name:"Ink",params:{panel:"#111111",panelText:"#fafafa",flip:!0},theme:{bg:"#fafafa",fg:"#111",accent:"#111","accent-fg":"#fafafa"}},sky:{name:"Sky",params:{panel:"#38bdf8",panelText:"#082f49"},theme:{bg:"#082f49",fg:"#e0f2fe",accent:"#38bdf8","accent-fg":"#082f49"}}},css:`
|
|
2
|
+
& .sp{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
|
|
3
|
+
& .sp.flip .txt{order:2}
|
|
4
|
+
& .sp .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,6cqw,96px)}
|
|
5
|
+
& .sp .ey{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lp-muted)}
|
|
6
|
+
& .sp h1{margin:14px 0 0;font-size:clamp(30px,4.8cqw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
|
|
7
|
+
& .sp p{margin:18px 0 0;max-width:40ch;color:var(--lp-muted);font-size:clamp(14px,1.3cqw,17px);line-height:1.6}
|
|
8
|
+
& .sp .lp-actions{justify-content:flex-start}
|
|
9
|
+
& .sp .pn{background:var(--pn);color:var(--pt);display:grid;place-items:center;overflow:hidden}
|
|
10
|
+
& .sp .pn span{font-weight:900;font-size:clamp(90px,19cqw,300px);letter-spacing:-.06em;line-height:1}
|
|
11
|
+
@container (max-width:700px){& .sp{grid-template-columns:1fr;grid-template-rows:38% 1fr}& .sp .txt,& .sp.flip .txt{order:2;justify-content:flex-start;padding-top:28px}& .sp .pn span{font-size:clamp(80px,30cqw,160px)}}
|
|
12
|
+
`,setup(a){let n=a.params,e=a.copy,p=o(a,"sp"+(n.flip?" flip":""),`<div class="txt"><span class="ey">${t(e.eyebrow)}</span><h1>${i(e.code)}${t(e.title)}</h1><p>${t(e.message)}</p></div><div class="pn" aria-hidden="true"><span>${t(e.code)}</span></div>`,{pn:n.panel,pt:n.panelText});return p.querySelector(".txt").append(s(a)),{destroy:()=>p.remove()}}};export{r as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as v}from"./chunk-4ZBXB36L.js";import{f as n}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var q={id:"stage",name:"Empty Stage",description:"The curtains part, the spotlight hunts across an empty stage, and the star of the show never walks on.",category:"Playful",kind:"2d",motion:"live",tags:["canvas","theatre","spotlight","curtains","dramatic","dark"],layout:"bottom",copy:{eyebrow:"Tonight's performance",title:"The show must go on. This page won't.",message:"Our lead role didn't turn up. Refunds are available at the box office, also known as the homepage.",actions:[{label:"Back to the lobby",href:"/",variant:"primary"}]},params:{curtain:"#9b0f1f",floor:"#3a2516",light:"#fff3d6",back:"#0d0a0c",follow:!0},theme:{bg:"#0d0a0c",fg:"#fff3e6",accent:"#ffd27a","accent-fg":"#1a0d03","code-color":"rgba(255,243,214,.92)","font-display":'"Playfair Display","Didot",Georgia,serif'},presetName:"Velvet",presets:{green:{name:"Emerald Theatre",params:{curtain:"#0f5a3a",floor:"#2a2014",light:"#f2fff6"},theme:{accent:"#c9ffe2","accent-fg":"#04140c"}},purple:{name:"Royal Purple",params:{curtain:"#4a1a6b",floor:"#24180f",light:"#fff0ff"},theme:{accent:"#f2d6ff","accent-fg":"#1a0628"}},blue:{name:"Opera Blue",params:{curtain:"#1b2f7a",floor:"#2a2420",light:"#e6f0ff"},theme:{accent:"#e6f0ff","accent-fg":"#0a1230"}},gold:{name:"Gold Lam\xE9",params:{curtain:"#b88a2a",floor:"#2a1d10",light:"#fff8e6"},theme:{accent:"#ffe7a3","accent-fg":"#1a1000"}},comedy:{name:"Comedy Club",eyebrow:"Open mic",title:"Tough crowd. No page.",params:{curtain:"#2a2a2e",floor:"#1a1a1d",light:"#ffffff",back:"#121216"},theme:{bg:"#121216",accent:"#ff4d6d","accent-fg":"#fff"}}},css:`& .lp-code{--lp-code-size:clamp(90px,14cqw,210px);font-weight:400;font-style:italic}
|
|
2
|
+
& .lp-overlay{justify-content:flex-end;padding-bottom:clamp(20px,6cqh,60px)}`,setup(d){let r=d.params,m=v(d),x=d.random,P=[],S=.5,C=()=>P=Array.from({length:160},()=>({x:x(),y:x(),s:x()}));C();let T=(f,g,e,o,l,c)=>{for(let p=0;p<9;p++){let h=g+p/9*e,i=e/9,t=Math.sin(l*.8+p*.7)*3*c,s=f.createLinearGradient(h,0,h+i,0);s.addColorStop(0,n("#000000",.55)),s.addColorStop(.35,r.curtain),s.addColorStop(.6,n("#ffffff",.08)),s.addColorStop(1,n("#000000",.45)),f.fillStyle=r.curtain,f.fillRect(h+t,0,i+1,o),f.fillStyle=s,f.fillRect(h+t,0,i+1,o)}};return{resize(){m.reset(),C()},frame(f,g){let e=m.g;m.reset();let o=m.w,l=m.h,c=l*.66;e.fillStyle=r.back,e.fillRect(0,0,o,l),e.fillStyle=n("#ffffff",.02);for(let a=0;a<o;a+=60)e.fillRect(a,0,2,c);let y=e.createLinearGradient(0,c,0,l);y.addColorStop(0,n(r.floor,1)),y.addColorStop(1,"#000"),e.fillStyle=y,e.fillRect(0,c,o,l-c),e.strokeStyle=n("#000000",.35);for(let a=-12;a<=12;a++)e.beginPath(),e.moveTo(o/2+a*40,c),e.lineTo(o/2+a*160,l),e.stroke();let p=r.follow&&d.pointer.engaged?d.pointer.x/o:.5+Math.sin(f*.45)*.28+Math.sin(f*1.3)*.04;S+=(p-S)*Math.min(1,g*2);let h=S*o,i={x:o*.5,y:-40},t={x:h,y:c+(l-c)*.25,rx:o*.12,ry:l*.045};e.save(),e.globalCompositeOperation="lighter";let s=e.createLinearGradient(0,0,0,t.y);s.addColorStop(0,n(r.light,.02)),s.addColorStop(1,n(r.light,.16)),e.fillStyle=s,e.beginPath(),e.moveTo(i.x-8,i.y),e.lineTo(i.x+8,i.y),e.lineTo(t.x+t.rx,t.y),e.lineTo(t.x-t.rx,t.y),e.closePath(),e.fill();let u=e.createRadialGradient(t.x,t.y,0,t.x,t.y,t.rx);u.addColorStop(0,n(r.light,.75)),u.addColorStop(.7,n(r.light,.25)),u.addColorStop(1,n(r.light,0)),e.fillStyle=u,e.beginPath(),e.ellipse(t.x,t.y,t.rx,t.ry,0,0,Math.PI*2),e.fill();for(let a of P){a.y-=.006*g*(.5+a.s),a.y<0&&(a.y=1);let b=a.y*t.y,k=b/t.y,G=i.x+(t.x-i.x)*k,I=8+(t.rx-8)*k,L=G+(a.x-.5)*2*I;e.fillStyle=n(r.light,.25*a.s),e.fillRect(L,b,1.5,1.5)}e.restore(),e.strokeStyle="#111",e.lineWidth=4,e.beginPath(),e.moveTo(o*.5,t.y),e.lineTo(o*.5,t.y-l*.22),e.stroke(),e.fillStyle="#222",e.beginPath(),e.ellipse(o*.5,t.y-l*.225,8,12,0,0,Math.PI*2),e.fill(),e.beginPath(),e.ellipse(o*.5,t.y,26,5,0,0,Math.PI*2),e.fill();let R=d.reducedMotion?1:Math.min(1,Math.max(0,(f-.3)/2)),M=1-Math.pow(1-R,3),w=o*(.5-.36*M);T(e,0,w,l,f,1),T(e,o-w,w,l,f,-1),e.fillStyle=r.curtain,e.fillRect(0,0,o,l*.07);for(let a=0;a<7;a++){let b=a/6*o;e.beginPath(),e.ellipse(b,l*.07,o/12,l*.05,0,0,Math.PI),e.fill()}e.fillStyle=n("#000000",.35),e.fillRect(0,l*.07-2,o,4),e.fillStyle=n("#ffcc66",.8),e.fillRect(0,l*.115,o,2)}}}};export{q as default};
|