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,20 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var a=n=>n.replace(/[&<>"]/g,r=>({"&":"&","<":"<",">":">",'"':"""})[r]),c={id:"swiss-poster",name:"Swiss Poster",description:"International Typographic Style: a strict grid, huge Helvetica-style numerals bleeding off the edge, a red rule and small flush-left text.",category:"Typography",kind:"2d",motion:"static",tags:["dom","typography","swiss","minimal","grid","editorial","static","light"],layout:"none",copy:{eyebrow:"Fehler / Erreur / Error",title:"Seite nicht gefunden. Page not found.",message:"The page you requested is not part of this system. Return to the index.",actions:[{label:"Index",href:"/",variant:"primary"},{label:"Contact",href:"/contact",variant:"secondary"}]},params:{paper:"#f2efe8",ink:"#111111",red:"#e30613",cols:12},theme:{bg:"#f2efe8",fg:"#111"},presetName:"Z\xFCrich",presets:{red:{name:"Rot",params:{paper:"#e30613",ink:"#ffffff",red:"#111111"},theme:{bg:"#e30613",fg:"#fff"}},black:{name:"Schwarz",params:{paper:"#111111",ink:"#f2efe8",red:"#e30613"},theme:{bg:"#111",fg:"#f2efe8"}},blue:{name:"Basel Blue",params:{paper:"#f4f4f2",ink:"#0a2a8a",red:"#ff5a1f"},theme:{bg:"#f4f4f2",fg:"#0a2a8a"}}},css:`
|
|
2
|
+
& .sw{position:absolute;inset:0;background:var(--paper);color:var(--ink);overflow:hidden;font-family:"Helvetica Neue","Neue Haas Grotesk Display Pro","Inter",Arial,sans-serif;
|
|
3
|
+
display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(8px,1.4cqw,20px);padding:clamp(18px,3cqw,44px)}
|
|
4
|
+
& .sw .gl{position:absolute;inset:clamp(18px,3cqw,44px);display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:clamp(8px,1.4cqw,20px);pointer-events:none;opacity:.07}
|
|
5
|
+
& .sw .gl i{border-left:1px solid currentColor;border-right:1px solid currentColor}
|
|
6
|
+
& .sw .top{grid-column:1/-1;display:flex;justify-content:space-between;font-size:clamp(11px,1cqw,13px);font-weight:500;letter-spacing:.01em;border-top:3px solid var(--ink);padding-top:10px}
|
|
7
|
+
& .sw .num{grid-column:1/-1;align-self:center;font-weight:700;font-size:clamp(160px,46cqw,700px);line-height:.78;letter-spacing:-.07em;margin-left:-.06em;white-space:nowrap}
|
|
8
|
+
& .sw .num span{color:var(--red)}
|
|
9
|
+
& .sw .bot{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:inherit;align-items:end}
|
|
10
|
+
& .sw .rule{grid-column:1/4;height:clamp(10px,1.4cqw,18px);background:var(--red);align-self:start;margin-top:6px}
|
|
11
|
+
& .sw h1{grid-column:5/10;margin:0;font-size:clamp(20px,2.6cqw,40px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
|
|
12
|
+
& .sw .side{grid-column:10/13}
|
|
13
|
+
& .sw .msg{font-size:clamp(12px,1.05cqw,14px);line-height:1.45;margin:0}
|
|
14
|
+
& .sw nav{display:flex;gap:14px;margin-top:12px;font-weight:700;font-size:13px}
|
|
15
|
+
& .sw nav a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
|
|
16
|
+
@container (max-width:760px){& .sw h1{grid-column:1/-1}& .sw .side{grid-column:1/-1;margin-top:10px}& .sw .rule{grid-column:1/6;margin-bottom:12px}}
|
|
17
|
+
`,setup(n){let r=n.params,s=n.copy,o=s.code||"404",p=Math.floor(o.length/2),l=[...o].map((t,i)=>i===p?`<span>${a(t)}</span>`:a(t)).join(""),e=document.createElement("div");return e.className="sw",e.style.setProperty("--paper",r.paper),e.style.setProperty("--ink",r.ink),e.style.setProperty("--red",r.red),e.style.setProperty("--cols",String(r.cols)),e.innerHTML=`<div class="gl" aria-hidden="true">${"<i></i>".repeat(r.cols)}</div>
|
|
18
|
+
<div class="top"><span>${a(s.eyebrow)}</span><span>${a(typeof location<"u"?location.pathname:"/")}</span><span>${new Date().getFullYear()}</span></div>
|
|
19
|
+
<div class="num" aria-hidden="true">${l}</div>
|
|
20
|
+
<div class="bot"><div class="rule"></div><h1><span class="lp-sr">Error ${a(o)}: </span>${a(s.title)}</h1><div class="side"><p class="msg">${a(s.message)}</p><nav>${s.actions.map(t=>`<a href="${a(t.href??"/")}">${a(t.label)}</a>`).join("")}</nav></div></div>`,n.root.append(e),e.querySelectorAll("nav a").forEach(t=>t.addEventListener("click",i=>{i.metaKey||i.ctrlKey||(i.preventDefault(),n.navigate(t.getAttribute("href"),i))})),{destroy(){e.remove()}}}};export{c as default};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var j={0:["\u2588\u2588\u2588\u2588\u2588","\u2588 \u2588","\u2588 \u2588","\u2588 \u2588","\u2588\u2588\u2588\u2588\u2588"],1:[" \u2588 "," \u2588\u2588 "," \u2588 "," \u2588 "," \u2588\u2588\u2588 "],2:["\u2588\u2588\u2588\u2588\u2588"," \u2588","\u2588\u2588\u2588\u2588\u2588","\u2588 ","\u2588\u2588\u2588\u2588\u2588"],3:["\u2588\u2588\u2588\u2588\u2588"," \u2588"," \u2588\u2588\u2588\u2588"," \u2588","\u2588\u2588\u2588\u2588\u2588"],4:["\u2588 \u2588","\u2588 \u2588","\u2588\u2588\u2588\u2588\u2588"," \u2588"," \u2588"],5:["\u2588\u2588\u2588\u2588\u2588","\u2588 ","\u2588\u2588\u2588\u2588\u2588"," \u2588","\u2588\u2588\u2588\u2588\u2588"],6:["\u2588\u2588\u2588\u2588\u2588","\u2588 ","\u2588\u2588\u2588\u2588\u2588","\u2588 \u2588","\u2588\u2588\u2588\u2588\u2588"],7:["\u2588\u2588\u2588\u2588\u2588"," \u2588"," \u2588 "," \u2588 "," \u2588 "],8:["\u2588\u2588\u2588\u2588\u2588","\u2588 \u2588","\u2588\u2588\u2588\u2588\u2588","\u2588 \u2588","\u2588\u2588\u2588\u2588\u2588"],9:["\u2588\u2588\u2588\u2588\u2588","\u2588 \u2588","\u2588\u2588\u2588\u2588\u2588"," \u2588","\u2588\u2588\u2588\u2588\u2588"]};function I(p){return[...p].every(r=>j[r])?[0,1,2,3,4].map(r=>[...p].map(o=>j[o][r]).join(" ")).join(`
|
|
2
|
+
`):null}var K=p=>p.toLowerCase().replace(/^(back to|go to|take me|return to)\s+/,"").replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")||"home",F={id:"terminal",name:"Terminal",description:"A real little shell. It types out its own error, then hands you the prompt: try help, ls, cd or sudo.",category:"Retro Tech",kind:"2d",motion:"interactive",tags:["dom","terminal","cli","developer","interactive","keyboard","accessible"],layout:"none",copy:{title:"No such file or directory",message:"The page you requested could not be found.",actions:[{label:"home",href:"/",variant:"primary"},{label:"blog",href:"/blog",variant:"secondary"},{label:"contact",href:"/contact",variant:"secondary"}]},params:{user:"guest",host:"site",chrome:"mac",crt:!1,speed:1,banner:!0,shell:"zsh"},theme:{bg:"#0d1117",fg:"#c9d1d9",accent:"#58a6ff","term-bg":"#0d1117","term-panel":"#161b22","term-prompt":"#7ee787","term-path":"#58a6ff","term-err":"#ff7b72","term-dim":"#8b949e","term-hi":"#e3b341"},presetName:"Modern",presets:{solarized:{name:"Solarized",theme:{bg:"#002b36",fg:"#93a1a1","term-bg":"#002b36","term-panel":"#073642","term-prompt":"#859900","term-path":"#268bd2","term-err":"#dc322f","term-dim":"#586e75","term-hi":"#b58900",accent:"#268bd2"}},nord:{name:"Nord",theme:{bg:"#2e3440",fg:"#d8dee9","term-bg":"#2e3440","term-panel":"#3b4252","term-prompt":"#a3be8c","term-path":"#88c0d0","term-err":"#bf616a","term-dim":"#616e88","term-hi":"#ebcb8b",accent:"#88c0d0"}},monokai:{name:"Monokai",theme:{bg:"#1e1f1c",fg:"#f8f8f2","term-bg":"#272822","term-panel":"#1e1f1c","term-prompt":"#a6e22e","term-path":"#66d9ef","term-err":"#f92672","term-dim":"#75715e","term-hi":"#e6db74",accent:"#f92672"}},light:{name:"Light",params:{chrome:"mac"},theme:{bg:"#e8eaed",fg:"#24292f","term-bg":"#ffffff","term-panel":"#f3f4f6","term-prompt":"#1a7f37","term-path":"#0969da","term-err":"#cf222e","term-dim":"#6e7781","term-hi":"#9a6700",accent:"#0969da"}},commodore:{name:"Home Computer",params:{chrome:"none",crt:!0,shell:"bash",user:"ready",host:"64k"},theme:{bg:"#3e31a2",fg:"#a5a0ff","term-bg":"#3e31a2","term-panel":"#3e31a2","term-prompt":"#a5a0ff","term-path":"#ffffff","term-err":"#ffffff","term-dim":"#8a84e6","term-hi":"#ffffff",accent:"#a5a0ff"}},green:{name:"Green Phosphor",params:{chrome:"none",crt:!0,shell:"bash"},theme:{bg:"#020a03",fg:"#33ff66","term-bg":"#020a03","term-panel":"#020a03","term-prompt":"#33ff66","term-path":"#33ff66","term-err":"#a6ffbd","term-dim":"#1d9c3f","term-hi":"#c8ffd6",accent:"#33ff66"}},amber:{name:"Amber Phosphor",params:{chrome:"none",crt:!0,shell:"bash"},theme:{bg:"#0c0700",fg:"#ffb000","term-bg":"#0c0700","term-panel":"#0c0700","term-prompt":"#ffb000","term-path":"#ffcc55","term-err":"#ffe0a0","term-dim":"#a87400","term-hi":"#fff0c8",accent:"#ffb000"}},paper:{name:"Paper",params:{chrome:"plain"},theme:{bg:"#e9e5dc",fg:"#3b3a36","term-bg":"#fbf9f4","term-panel":"#efebe2","term-prompt":"#3f7d3a","term-path":"#2f5fa7","term-err":"#b3362c","term-dim":"#8a867c","term-hi":"#8a5a00",accent:"#2f5fa7"}},shell:{name:"Blue Shell",params:{chrome:"plain",shell:"ps",user:"PS",host:"C:"},theme:{bg:"#012456",fg:"#eeedf0","term-bg":"#012456","term-panel":"#0c3a75","term-prompt":"#eeedf0","term-path":"#eeedf0","term-err":"#ff8c8c","term-dim":"#9fb6d8","term-hi":"#ffff8c",accent:"#ffff8c"}},dracula:{name:"Vampire",theme:{bg:"#1e1f29",fg:"#f8f8f2","term-bg":"#282a36","term-panel":"#21222c","term-prompt":"#50fa7b","term-path":"#bd93f9","term-err":"#ff5555","term-dim":"#6272a4","term-hi":"#f1fa8c",accent:"#ff79c6"}},hacker:{name:"Red Team",params:{chrome:"none",crt:!0,user:"root",host:"mainframe",shell:"bash"},theme:{bg:"#0a0000",fg:"#ff3b3b","term-bg":"#0a0000","term-panel":"#0a0000","term-prompt":"#ff3b3b","term-path":"#ff8080","term-err":"#ffd0d0","term-dim":"#992222","term-hi":"#ffffff",accent:"#ff3b3b"}}},css:`
|
|
3
|
+
&{font-family:var(--lp-font-mono)}
|
|
4
|
+
& .lpt-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4cqw,56px)}
|
|
5
|
+
& .lpt-win{width:min(920px,100%);height:min(620px,100%);display:flex;flex-direction:column;background:var(--lp-term-bg);
|
|
6
|
+
border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--lp-fg) 12%,transparent);overflow:hidden}
|
|
7
|
+
& .lpt-bar{height:38px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--lp-term-panel);color:var(--lp-term-dim);font-size:12px}
|
|
8
|
+
& .lpt-bar i{width:12px;height:12px;border-radius:50%;display:block}
|
|
9
|
+
& .lpt-bar span{flex:1;text-align:center;margin-right:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
10
|
+
&.lpt-plain .lpt-bar i{display:none}&.lpt-plain .lpt-bar span{margin:0;text-align:left}
|
|
11
|
+
&.lpt-none .lpt-win{width:100%;height:100%;border-radius:0;box-shadow:none;background:transparent}
|
|
12
|
+
&.lpt-none .lpt-bar{display:none}
|
|
13
|
+
&.lpt-none .lpt-wrap{padding:clamp(16px,5cqw,64px)}
|
|
14
|
+
& .lpt-screen{flex:1;overflow:auto;padding:18px 20px 28px;font-size:clamp(12.5px,1.15cqw,15px);line-height:1.6;color:var(--lp-fg);cursor:text;scrollbar-width:thin}
|
|
15
|
+
& .lpt-screen pre{margin:0;font:inherit;white-space:pre-wrap;word-break:break-word}
|
|
16
|
+
& .lpt-banner{color:var(--lp-term-hi);line-height:1.05;font-size:.82em;margin:2px 0 14px!important;letter-spacing:0}
|
|
17
|
+
& .p{color:var(--lp-term-prompt)}& .d{color:var(--lp-term-path)}& .e{color:var(--lp-term-err)}& .m{color:var(--lp-term-dim)}& .h{color:var(--lp-term-hi)}
|
|
18
|
+
& .lpt-screen a{color:var(--lp-term-path);text-decoration:underline;text-underline-offset:3px}
|
|
19
|
+
& .lpt-screen a:hover{color:var(--lp-term-hi)}
|
|
20
|
+
& .lpt-in{display:flex;align-items:baseline;gap:0}
|
|
21
|
+
& .lpt-field{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
|
|
22
|
+
& .lpt-caret{display:inline-block;width:.62em;height:1.15em;vertical-align:text-bottom;background:var(--lp-fg);margin-left:1px;animation:lpt-blink 1.05s steps(1) infinite}
|
|
23
|
+
&.lpt-unfocused .lpt-caret{background:transparent;outline:1px solid var(--lp-fg)}
|
|
24
|
+
@keyframes lpt-blink{50%{opacity:0}}
|
|
25
|
+
&.lpt-crt .lpt-screen{text-shadow:0 0 6px color-mix(in srgb,var(--lp-fg) 70%,transparent),0 0 1px var(--lp-fg)}
|
|
26
|
+
&.lpt-crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
|
|
27
|
+
background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
|
|
28
|
+
animation:lpt-flicker 6s infinite}
|
|
29
|
+
@keyframes lpt-flicker{0%,100%{opacity:1}48%{opacity:.92}50%{opacity:1}}
|
|
30
|
+
@media (prefers-reduced-motion:reduce){& .lpt-caret,&.lpt-crt::after{animation:none}}
|
|
31
|
+
`,setup(p){let r=p.params,o=p.copy,g=p.root,i=document.createElement("div");i.className="lpt-wrap",g.classList.add(`lpt-${r.chrome}`),r.crt&&g.classList.add("lpt-crt");let A=r.shell==="ps"?"PowerShell":r.shell;i.innerHTML=`<div class="lpt-win" role="application" aria-label="Terminal">
|
|
32
|
+
<div class="lpt-bar" aria-hidden="true"><i style="background:#ff5f57"></i><i style="background:#febc2e"></i><i style="background:#28c840"></i><span>${r.user}@${r.host} \u2014 ${A}</span></div>
|
|
33
|
+
<div class="lpt-screen"><h1 class="lp-sr">Error ${o.code}: ${o.title}</h1><div class="lpt-out" role="log" aria-live="polite"></div>
|
|
34
|
+
<div class="lpt-in" hidden><span class="lpt-prompt"></span><span class="lpt-typed"></span><span class="lpt-caret"></span></div>
|
|
35
|
+
<input class="lpt-field" aria-label="Terminal input" autocomplete="off" autocapitalize="off" spellcheck="false" /></div></div>`,g.append(i);let b=i.querySelector(".lpt-screen"),k=i.querySelector(".lpt-out"),S=i.querySelector(".lpt-in"),C=i.querySelector(".lpt-prompt"),u=i.querySelector(".lpt-typed"),l=i.querySelector(".lpt-field"),a=e=>e.replace(/[&<>"]/g,t=>({"&":"&","<":"<",">":">",'"':"""})[t]),x="~",$=()=>r.shell==="ps"?`<span class="p">PS ${a(r.host)}\\Users\\${a(x==="~"?"guest":x)}></span> `:r.shell==="bash"?`<span class="p">${a(r.user)}@${a(r.host)}</span>:<span class="d">${a(x)}</span>$ `:`<span class="p">\u279C</span> <span class="d">${a(x)}</span> `,L=typeof location<"u"&&decodeURIComponent(location.pathname).replace(/\/$/,"")||"/missing-page",f=(o.actions.length?o.actions:[{label:"home",href:"/"}]).map(e=>({name:K(e.label),href:e.href??"/",action:e})),v=(e,t)=>{let s=f.find(w=>w.href===e)?.action;s?.onClick&&t&&s.onClick(t),p.navigate(e,t)},n=e=>{let t=document.createElement("pre");return t.innerHTML=e,k.append(t),b.scrollTop=b.scrollHeight,t},q=()=>f.map(e=>`<a href="${a(e.href)}" data-href="${a(e.href)}">${a(e.name)}/</a>`).join(" ")||'<span class="m">(empty)</span>';k.addEventListener("click",e=>{let t=e.target.closest("a");if(!t)return;let s=t.getAttribute("data-href");s&&(e.preventDefault(),v(s,e))});let z=(e,t)=>r.shell==="ps"?`<span class="e">${a(e)} : Cannot find path '${a(t)}' because it does not exist.</span>`:r.shell==="bash"?`<span class="e">bash: ${a(e)}: ${a(t)}: No such file or directory</span>`:`<span class="e">${a(e)}: no such file or directory: ${a(t)}</span>`,m=[],d=0;function R(e){let t=e.trim();if(n($()+a(t)),!t)return;m.push(t),d=m.length;let[s,...w]=t.split(/\s+/),c=w.join(" "),M=h=>f.find(H=>H.name===h.replace(/^~?\/?/,"").replace(/\/$/,""));switch(s.toLowerCase()){case"help":n(`<span class="h">Available commands</span>
|
|
36
|
+
<span class="d">ls</span> list places you can go
|
|
37
|
+
<span class="d">cd</span> <place> go there
|
|
38
|
+
<span class="d">home</span> back to the homepage
|
|
39
|
+
<span class="d">back</span> previous page
|
|
40
|
+
<span class="d">whoami</span>, <span class="d">date</span>, <span class="d">echo</span>, <span class="d">clear</span>, <span class="d">history</span>`);break;case"ls":case"dir":case"ll":n(q());break;case"cd":case"open":case"cat":case"set-location":{if(!c||c==="~"||c==="/")return v(f[0]?.href??"/");if(c==="..")return m.length>1?window.history.back():v("/");let h=M(c);h?(n(`<span class="m">\u2192 opening ${a(h.href)}</span>`),setTimeout(()=>v(h.href),350)):n(z(s,c));break}case"home":case"exit":case"logout":case"q":n('<span class="m">\u2192 heading home</span>'),setTimeout(()=>v(f[0]?.href??"/"),300);break;case"back":window.history.back();break;case"clear":case"cls":k.innerHTML="";break;case"whoami":n(a(r.user)+' <span class="m">(lost, but in good company)</span>');break;case"pwd":n(a(L));break;case"date":n(a(new Date().toString()));break;case"echo":n(a(c));break;case"history":n(m.map((h,H)=>` ${H+1} ${a(h)}`).join(`
|
|
41
|
+
`));break;case"sudo":n(`<span class="e">${a(r.user)} is not in the sudoers file. This incident will be reported.</span>`);break;case"rm":n('<span class="e">Nice try. The page is already gone.</span>');break;case"404":n(`<span class="h">${a(o.title)}</span> <span class="m">\u2014 ${a(o.message)}</span>`);break;case"vim":case"vi":case"nano":n(`<span class="m">You'd never get out. Try </span><span class="d">home</span>`);break;default:n(r.shell==="ps"?`<span class="e">${a(s)} : The term '${a(s)}' is not recognized.</span>`:`<span class="e">${r.shell}: command not found: ${a(s)}</span>`),n('<span class="m">Type </span><span class="d">help</span><span class="m"> to see what works.</span>')}}let N=!1,E=e=>{N=e,g.classList.toggle("lpt-unfocused",!e)};E(!1),l.addEventListener("focus",()=>E(!0)),l.addEventListener("blur",()=>E(!1)),l.addEventListener("input",()=>{u.textContent=l.value}),l.addEventListener("keydown",e=>{if(e.key==="Enter"){let t=l.value;l.value="",u.textContent="",R(t),C.innerHTML=$()}else if(e.key==="ArrowUp"&&m.length)d=Math.max(0,d-1),l.value=m[d],u.textContent=l.value,e.preventDefault();else if(e.key==="ArrowDown"&&m.length)d=Math.min(m.length,d+1),l.value=m[d]??"",u.textContent=l.value,e.preventDefault();else if(e.key==="Tab"){e.preventDefault();let[t,...s]=l.value.split(" "),w=s.join(" "),c=f.find(M=>M.name.startsWith(w));s.length&&c&&(l.value=`${t} ${c.name}`),u.textContent=l.value}else e.key==="l"&&e.ctrlKey&&(e.preventDefault(),k.innerHTML="")}),b.addEventListener("pointerdown",e=>{e.target.closest("a")||(l.focus({preventScroll:!0}),e.preventDefault())});let P=[],T=!1,y=e=>new Promise(t=>P.push(window.setTimeout(t,p.reducedMotion?0:e/r.speed)));async function D(e){let t=n($());for(let s of e){if(T)return;t.innerHTML+=a(s),await y(45+Math.random()*70)}await y(260)}return(async()=>{let e=r.banner&&I(o.code);if(e){let s=n(a(e));s.className="lpt-banner",s.setAttribute("aria-hidden","true")}n(`<span class="m"># ${a(o.title)} \u2014 ${a(o.message)}</span>`),await y(500);let t=L.length>1?L:"/missing-page";await D(`cd ${t}`),!T&&(n(z("cd",t)),await y(500),await D("ls"),!T&&(n(q()),await y(300),n(`<span class="m">Type </span><span class="d">help</span><span class="m">, or </span><span class="d">cd ${a(f[0]?.name??"home")}</span><span class="m"> to get back.</span>`),C.innerHTML=$(),S.hidden=!1,b.scrollTop=b.scrollHeight))})(),p.onWindow("keydown",e=>{if(N||e.metaKey||e.ctrlKey||e.altKey||e.key.length!==1||!p.visible()||S.hidden)return;let t=(document.activeElement?.tagName??"").toLowerCase();t==="input"||t==="textarea"||l.focus({preventScroll:!0})}),{destroy(){T=!0,P.forEach(clearTimeout),i.remove(),g.classList.remove("lpt-crt","lpt-unfocused",`lpt-${r.chrome}`)}}}};export{F as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as M}from"./chunk-4ZBXB36L.js";import{f as p}from"./chunk-HXSSPN2I.js";import{a as T}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var A={id:"thunderstorm",name:"Thunderstorm",description:"A storm rolls over a dark plain. Every lightning flash lights up the clouds, and for a split second the error shows in them.",category:"Nature",kind:"2d",motion:"live",tags:["canvas","storm","lightning","rain","dramatic","dark","weather"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Severe weather warning",title:"This page was struck by lightning.",message:"Wait for the next flash and you'll see what's left of it. Shelter is available on the homepage.",actions:[{label:"Take shelter",href:"/",variant:"primary"}]},params:{sky:"#0a0d14",cloud:"#2a3140",ground:"#05070a",bolt:"#e6eeff",rain:1,every:3.2},theme:{bg:"#0a0d14",fg:"#e6eef8",accent:"#e6eef8","accent-fg":"#0a0d14"},presetName:"Night Storm",presets:{purple:{name:"Violet Storm",params:{sky:"#120a1f",cloud:"#3a2a55",bolt:"#f0dcff"},theme:{bg:"#120a1f",accent:"#e6ccff","accent-fg":"#120a1f"}},dust:{name:"Dust Storm",params:{sky:"#2a1a0d",cloud:"#6b4a2a",ground:"#1a0f05",bolt:"#fff2d6",rain:.2},theme:{bg:"#2a1a0d",accent:"#ffe0b0","accent-fg":"#2a1a0d"}},sea:{name:"Storm at Sea",params:{sky:"#05121a",cloud:"#1d3440",ground:"#020a10",bolt:"#d6f2ff",rain:1.4,every:2.4},theme:{bg:"#05121a"}}},setup(b){let c=b.params,t=M(b),h=b.random,u,w,y=[],d=0,v=.9,S=()=>{let n=Math.min(1,b.dpr),m=Math.ceil(t.w*n),e=Math.ceil(t.h*.62*n),f=()=>Object.assign(document.createElement("canvas"),{width:m,height:e});u=f(),w=f();let i=u.getContext("2d"),o=w.getContext("2d");for(let l=0;l<260;l++){let g=h()*m,a=h()**1.6*e*.9,r=(30+h()*90)*n,s=i.createRadialGradient(g,a,0,g,a,r);s.addColorStop(0,p(c.cloud,.32)),s.addColorStop(1,p(c.cloud,0)),i.fillStyle=s,i.fillRect(g-r,a-r,r*2,r*2)}o.drawImage(u,0,0),o.globalCompositeOperation="lighter",o.drawImage(u,0,0),o.globalCompositeOperation="source-over",o.font=`900 ${Math.min(m*.26,e*.55)}px ${T}`,o.textAlign="center",o.textBaseline="middle",o.filter=`blur(${8*n}px)`,o.fillStyle="rgba(230,238,255,.55)",o.fillText(b.copy.code||"404",m/2,e*.5),o.filter="none"};S();let x=()=>{let n=[],m=(e,f,i,o,l)=>{let g=[[e,f]],a=e,r=f;for(let s=0;s<18&&r<t.h*.86;s++)i+=(h()-.5)*.9,a+=Math.sin(i)*o,r+=Math.cos(i)*o,g.push([a,r]),l<2&&h()<.18&&m(a,r,i+(h()-.5)*1.6,o*.7,l+1);n.push(g)};return m(t.w*(.2+h()*.6),t.h*.12,(h()-.5)*.4,t.h*.045,0),n};return{resize(){t.reset(),S()},frame(n,m){let e=t.g;t.reset(),m>0&&n>v&&(v=n+c.every*(.5+h()),y=x(),d=1),d=Math.max(0,d-m*1.6);let f=d>.7||d>.3&&d<.45?d:d*.4;e.fillStyle=c.sky,e.fillRect(0,0,t.w,t.h),e.fillStyle=p(c.bolt,f*.25),e.fillRect(0,0,t.w,t.h);let i=n*8%t.w;e.drawImage(u,-i,0,t.w,t.h*.62),e.drawImage(u,t.w-i,0,t.w,t.h*.62),e.globalAlpha=Math.min(1,.14+f),e.drawImage(w,0,0,t.w,t.h*.62),e.globalAlpha=1,d>.25&&(e.strokeStyle=c.bolt,e.shadowColor=c.bolt,e.shadowBlur=20,y.forEach((a,r)=>{e.lineWidth=r===y.length-1?3:1.4,e.beginPath(),a.forEach(([s,k],C)=>C?e.lineTo(s,k):e.moveTo(s,k)),e.stroke()}),e.shadowBlur=0);let o=t.h*.86;e.fillStyle=c.ground,e.beginPath(),e.moveTo(0,t.h);for(let a=0;a<=t.w;a+=20)e.lineTo(a,o-Math.sin(a*.005)*12-Math.sin(a*.013)*6);e.lineTo(t.w,t.h),e.fill(),e.strokeStyle=c.ground,e.lineWidth=6;let l=t.w*.82;e.beginPath(),e.moveTo(l,o),e.lineTo(l,o-90),e.lineTo(l-30,o-130),e.moveTo(l,o-70),e.lineTo(l+40,o-115),e.moveTo(l,o-90),e.lineTo(l+8,o-150),e.stroke(),e.strokeStyle=p("#b8c6d8",.25+f*.4),e.lineWidth=1,e.beginPath();let g=Math.round(260*c.rain);for(let a=0;a<g;a++){let r=(a*97.3+n*300)%(t.w+100)-50,s=(a*53.7+n*900*(.8+a%5*.08))%t.h;e.moveTo(r,s),e.lineTo(r-4,s+16)}e.stroke()}}}};export{A as default};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import{a as g}from"./chunk-LMRCHEWX.js";import{a as h,b as l,c as u,h as p}from"./chunk-QJZBGT2Q.js";import{e as n}from"./chunk-HXSSPN2I.js";import{a as f,e as s}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var m=`
|
|
2
|
+
uniform sampler2D uText;
|
|
3
|
+
uniform vec3 uPaper, uLine, uAccent, uLow, uHigh;
|
|
4
|
+
uniform float uSpacing, uTint;
|
|
5
|
+
${h}
|
|
6
|
+
${l}
|
|
7
|
+
${u}
|
|
8
|
+
float height(vec2 uv, vec2 p, float t) {
|
|
9
|
+
float h = fbm(p * 1.4 + vec2(t * 0.01, 0.0)) * 0.7 + fbm(p * 3.1 - 2.0) * 0.25;
|
|
10
|
+
// the code rises out of the terrain as a plateau
|
|
11
|
+
h += textureLod(uText, uv, 2.5).a * 0.55;
|
|
12
|
+
return h;
|
|
13
|
+
}
|
|
14
|
+
void main() {
|
|
15
|
+
vec2 fc = gl_FragCoord.xy;
|
|
16
|
+
vec2 uv = fc / uRes;
|
|
17
|
+
vec2 p = (fc - 0.5 * uRes) / uRes.y + uMouse * 0.02;
|
|
18
|
+
float t = uTime;
|
|
19
|
+
float h = height(uv, p, t);
|
|
20
|
+
float v = h / uSpacing;
|
|
21
|
+
float w = fwidth(v);
|
|
22
|
+
float line = 1.0 - smoothstep(0.0, w * 1.4, abs(fract(v - 0.5) - 0.5));
|
|
23
|
+
float index = 1.0 - smoothstep(0.0, w * 2.2, abs(fract(v / 5.0 - 0.5) - 0.5) * 5.0);
|
|
24
|
+
vec3 col = uPaper;
|
|
25
|
+
if (uTint > 0.5) col = mix(uLow, uHigh, smoothstep(0.2, 1.0, floor(v) * uSpacing));
|
|
26
|
+
col = mix(col, uLine, line * 0.55);
|
|
27
|
+
col = mix(col, uLine, index * 0.85);
|
|
28
|
+
// the plateau's edge is drawn in the accent colour
|
|
29
|
+
float plate = textureLod(uText, uv, 2.5).a;
|
|
30
|
+
float edge = 1.0 - smoothstep(0.0, fwidth(plate) * 1.5, abs(plate - 0.5));
|
|
31
|
+
col = mix(col, uAccent, edge * 0.9);
|
|
32
|
+
// survey grid
|
|
33
|
+
vec2 g = abs(fract(fc / 80.0) - 0.5);
|
|
34
|
+
col = mix(col, uLine, (1.0 - smoothstep(0.0, 0.01, min(g.x, g.y))) * 0.08);
|
|
35
|
+
col *= 0.98 + 0.02 * hash12(fc);
|
|
36
|
+
fragColor = vec4(toSRGB(col), 1.0);
|
|
37
|
+
}
|
|
38
|
+
`,y={id:"topographic",name:"Topographic",description:"A survey map with contour lines curving round the terrain, and the error rising out of it as a plateau. The contours drift slowly as the land shifts.",category:"Abstract",kind:"2d",motion:"live",tags:["webgl","map","contours","minimal","light","elegant","cartography"],layout:"bottom-left",codeInScene:!0,copy:{eyebrow:"Survey sheet 404",title:"Off the map.",message:"This terrain was surveyed thoroughly. The page you were looking for isn't on it.",actions:[{label:"Back to known ground",href:"/",variant:"primary"}]},params:{paper:"#f4f1e8",line:"#8a6a4a",accent:"#e4572e",spacing:.045,tint:!1,low:"#dfe9d0",high:"#f2e4c4"},theme:{bg:"#f4f1e8",fg:"#2a1d10",accent:"#2a1d10","accent-fg":"#fff"},presetName:"Survey",presets:{night:{name:"Night Ops",params:{paper:"#0b1410",line:"#3dff8a",accent:"#ffffff",spacing:.05},theme:{bg:"#0b1410",fg:"#d6ffe6",accent:"#3dff8a","accent-fg":"#0b1410"}},tinted:{name:"Hypsometric",params:{tint:!0,low:"#cfe3c4",high:"#f2d9b0",line:"#5a4a32",accent:"#c1121f"},theme:{bg:"#e6e6cf"}},blue:{name:"Bathymetry",eyebrow:"Depth chart 404",title:"Sunk below the soundings.",params:{paper:"#e6f1fa",line:"#1d4e89",accent:"#ff6b35",tint:!0,low:"#9fc9ec",high:"#e6f1fa"},theme:{bg:"#e6f1fa",fg:"#0b2340"}},ink:{name:"Ink on Black",params:{paper:"#111111",line:"#e6e6e6",accent:"#ffcc00",spacing:.035},theme:{bg:"#111",fg:"#f2f2f2",accent:"#ffcc00","accent-fg":"#111"}}},setup(o){let a=o.params,t=document.createElement("canvas"),r=null,e,c=()=>{t.width=512,t.height=Math.max(64,Math.round(512*o.height/Math.max(1,o.width)));let i=t.getContext("2d");i.clearRect(0,0,t.width,t.height),i.save(),i.translate(t.width*.08,t.height*.34-t.height*.22),s(i,o.copy.code||"404",{width:t.width*.84,height:t.height*.44,font:f,weight:900,fit:.9}),i.restore(),r&&(e.bindTexture(e.TEXTURE_2D,r),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,!1),e.generateMipmap(e.TEXTURE_2D))};return{...g(o,{frag:m,init(i){e=i,c(),r=p(e,t,{filter:"mipmap"})},uniforms:()=>({uText:r,uPaper:n(a.paper),uLine:n(a.line),uAccent:n(a.accent),uLow:n(a.low),uHigh:n(a.high),uSpacing:a.spacing,uTint:a.tint?1:0})}),resize:c}}};export{y as default};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var $=e=>e.replace(/[&<>"]/g,a=>({"&":"&","<":"<",">":">",'"':"""})[a]);function k(e,a){let c=[],n=0;for(let d=0;d<=46;d++){let i=d/46;n+=(e()-.5)*2.2,n*=.86;let l=(e()-.5)*2.4;a?c.push([i*100,52+n*2+l]):c.push([i*100,78-i*56+n*2+l])}return c}var z={id:"torn-page",name:"Torn Page",description:"The page you wanted, ripped in two. The halves drift apart to show the 404 beneath and lean toward your cursor.",category:"Paper & Print",kind:"2d",motion:"live",tags:["dom","paper","torn","light","tactile","minimal"],layout:"center",copy:{eyebrow:"Error 404",title:"Someone tore this page out.",message:"There's nothing behind it but the error. The rest of the book is still on the shelf.",actions:[{label:"Back to the first page",href:"/",variant:"primary"}]},params:{paper:"#fbfaf6",line:"#e6e2d8",under:"#141414",tear:"diagonal"},theme:{bg:"#e7e3da",fg:"#f5f3ee",accent:"#f5f3ee","accent-fg":"#141414","code-color":"#f5f3ee"},presetName:"Notebook",presets:{mint:{name:"Mint Stationery",params:{paper:"#e9f7f0",line:"#cfe9dc",under:"#0f3b2a",tear:"horizontal"},theme:{bg:"#d4ebdf",fg:"#eafff4",accent:"#eafff4","accent-fg":"#0f3b2a","code-color":"#eafff4"}},newsprint:{name:"Newsprint",params:{paper:"#ebe6da",line:"#d6d0c2",under:"#c1121f"},theme:{bg:"#dcd6c8",fg:"#fff4e8",accent:"#fff4e8","accent-fg":"#c1121f","code-color":"#fff4e8"}},cobalt:{name:"Cobalt",params:{paper:"#ffffff",line:"#e6ebf5",under:"#1d3fd6",tear:"horizontal"},theme:{bg:"#e9eef8",fg:"#ffffff",accent:"#ffffff","accent-fg":"#1d3fd6","code-color":"#ffffff"}},kraft:{name:"Kraft",params:{paper:"#d9b88a",line:"#c6a273",under:"#2a1d10",tear:"horizontal"},theme:{bg:"#c9ab80","accent-fg":"#2a1d10",fg:"#f6ead6",accent:"#f6ead6","code-color":"#f6ead6"}},blueprint:{name:"Blueprint",params:{paper:"#1f4e8c",line:"#3a6aa8",under:"#f2f6fb"},theme:{bg:"#163b6b",fg:"#0f2a4d",accent:"#0f2a4d","accent-fg":"#fff","code-color":"#0f2a4d"}},red:{name:"Red Envelope",params:{paper:"#d7263d",line:"#c21f35",under:"#fff4e8",tear:"horizontal"},theme:{bg:"#b81d31",fg:"#2b0a0f",accent:"#2b0a0f","accent-fg":"#fff4e8","code-color":"#2b0a0f"}},midnight:{name:"Midnight",params:{paper:"#1c1d22",line:"#26272e",under:"#f3d35c"},theme:{bg:"#111216",fg:"#16130a",accent:"#16130a","accent-fg":"#f3d35c","code-color":"#16130a"}}},css:`
|
|
2
|
+
& .tp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1600px}
|
|
3
|
+
& .tp-under{position:absolute;width:min(78cqw,900px);height:min(78cqh,620px);background:var(--under);border-radius:6px;
|
|
4
|
+
box-shadow:inset 0 0 120px rgba(0,0,0,.35)}
|
|
5
|
+
& .tp-half{position:absolute;width:min(78cqw,900px);height:min(78cqh,620px);background:var(--paper);border-radius:6px;
|
|
6
|
+
transition:transform 1.4s cubic-bezier(.2,.8,.2,1);will-change:transform;filter:drop-shadow(0 18px 30px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.12))}
|
|
7
|
+
& .tp-half .sheet{position:absolute;inset:0;padding:6% 7%;display:flex;flex-direction:column;gap:14px;
|
|
8
|
+
background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--line) 31px 32px);border-radius:inherit}
|
|
9
|
+
& .tp-half .sk{background:var(--line);border-radius:6px;filter:brightness(.96)}
|
|
10
|
+
& .tp-fibre{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
|
|
11
|
+
& .lp-overlay{z-index:1}
|
|
12
|
+
& .lp-code{color:var(--lp-code-color);--lp-code-size:clamp(110px,18cqw,240px);font-weight:800;letter-spacing:-.05em}
|
|
13
|
+
& .lp-message{color:color-mix(in srgb,var(--lp-fg) 70%,transparent)}
|
|
14
|
+
& .lp-stage{z-index:2;pointer-events:none}
|
|
15
|
+
`,setup(e){let a=e.params,c=e.random,f=a.tear==="horizontal",n=k(c,f),d=n.map(([o,t])=>`${o.toFixed(2)}% ${t.toFixed(2)}%`).join(","),i=[...n].reverse().map(([o,t])=>`${o.toFixed(2)}% ${t.toFixed(2)}%`).join(","),l=f?`polygon(0% 0%, 100% 0%, ${i})`:`polygon(0% 0%, 100% 0%, ${i})`,v=`polygon(${d}, 100% 100%, 0% 100%)`,g=()=>[["28%","26px"],["62%","14px"],["100%","120px"],["90%","12px"],["96%","12px"],["70%","12px"],["100%","12px"],["84%","12px"],["40%","12px"],["92%","12px"]].map(([t,b])=>`<div class="sk" style="width:${t};height:${b}"></div>`).join(""),r=document.createElement("div");r.className="tp",r.style.setProperty("--paper",a.paper),r.style.setProperty("--line",a.line),r.style.setProperty("--under",a.under),r.innerHTML=`<div class="tp-half a" style="clip-path:${l}"><div class="sheet">${g()}</div></div>
|
|
16
|
+
<div class="tp-half b" style="clip-path:${v}"><div class="sheet">${g()}</div></div>`;let s=document.createElement("div");s.className="tp",s.innerHTML='<div class="tp-under"></div>',s.style.zIndex="0",s.style.setProperty("--under",a.under),e.root.insertBefore(s,e.root.firstChild),e.stage.append(r);let m=r.querySelector(".a"),h=r.querySelector(".b"),p=f?{ax:0,ay:-34,ar:-3,bx:0,by:30,br:2.5}:{ax:-20,ay:-26,ar:-7,bx:20,by:24,br:6},u=e.reducedMotion,w=setTimeout(()=>u=!0,600);return{frame(o){let t=u?1:0,b=e.pointer.sx*8,y=e.pointer.sy*6,x=e.reducedMotion?0:Math.sin(o*.8)*1.2;m.style.transform=`translate(${(p.ax+b*.6)*t}%, ${(p.ay-y*.5-x)*t}%) rotate(${p.ar*t+e.pointer.sx*1.5}deg) rotateX(${e.pointer.sy*4}deg)`,h.style.transform=`translate(${(p.bx+b*.4)*t}%, ${(p.by-y*.3+x)*t}%) rotate(${p.br*t-e.pointer.sx*1.2}deg) rotateX(${e.pointer.sy*-4}deg)`,o>1&&(m.style.transition="transform .6s cubic-bezier(.2,.8,.2,1)",h.style.transition="transform .6s cubic-bezier(.2,.8,.2,1)")},destroy(){clearTimeout(w),r.remove(),s.remove()}}}};export{z as default};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import{a as D}from"./chunk-4ZBXB36L.js";import{f as M}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var B={id:"treasure-map",name:"Here Be Dragons",description:"An old parchment chart. The dotted route draws itself out past the known coast to an X in open water, where a sea serpent waits.",category:"Paper & Print",kind:"2d",motion:"live",tags:["canvas","map","pirate","vintage","illustration","light","adventure"],layout:"bottom-left",copy:{eyebrow:"Mare Incognitum",title:"Ye've sailed off the map.",message:"X marks the spot, but there's naught here but sea and serpents. Chart a course back to port.",actions:[{label:"Return to port",href:"/",variant:"primary"},{label:"Ask the harbourmaster",href:"/contact",variant:"secondary"}]},params:{paper:"#ead6ab",land:"#d8bd85",ink:"#4a2f17",sea:"#8a6a43",red:"#a3241a",serpent:!0},theme:{bg:"#ead6ab",fg:"#3a2410",accent:"#3a2410","accent-fg":"#f3e4c4","font-display":'"IM Fell English","Fraunces","Palatino Linotype",Palatino,Georgia,ui-serif,serif',"code-color":"rgba(58,36,16,.85)","title-weight":"600"},presetName:"Parchment",presets:{tropic:{name:"Tropical Chart",params:{paper:"#f2e2b8",land:"#9fcf7a",ink:"#3a2a12",sea:"#3a8aa8",red:"#d6281a"},theme:{bg:"#f2e2b8"}},blueprint:{name:"Blueprint Chart",params:{paper:"#1c4f8f",land:"#2a64a8",ink:"#e6f0ff",sea:"#9fc3ff",red:"#ffd23f",serpent:!0},theme:{bg:"#1c4f8f",fg:"#e6f0ff",accent:"#e6f0ff","accent-fg":"#1c4f8f","code-color":"rgba(230,240,255,.9)"}},night:{name:"Night Chart",params:{paper:"#1d2433",land:"#2a3346",ink:"#c9b78d",sea:"#7f8aa6",red:"#e2574c"},theme:{bg:"#1d2433",fg:"#e6d8b6",accent:"#e6d8b6","accent-fg":"#1d2433","code-color":"rgba(230,216,182,.9)"}},nautical:{name:"Admiralty",params:{paper:"#eef1ea",land:"#e7dcc0",ink:"#1f3550",sea:"#5d7896",red:"#c0392b",serpent:!1},theme:{bg:"#eef1ea",fg:"#1f3550",accent:"#1f3550","accent-fg":"#eef1ea","code-color":"rgba(31,53,80,.85)"}},sepia:{name:"Sepia",params:{paper:"#d9c3a0",land:"#c9ad80",ink:"#2e1c0e",sea:"#6b4f33",red:"#7a1d14"},theme:{bg:"#d9c3a0",fg:"#2e1c0e",accent:"#2e1c0e","accent-fg":"#e8d7b9"}}},css:`& .lp-code{--lp-code-size:clamp(70px,9cqw,128px);font-weight:600;letter-spacing:.02em;font-family:var(--lp-font-display)}
|
|
2
|
+
& .lp-title{font-style:italic}
|
|
3
|
+
& .lp-btn--primary{border-radius:2px}`,setup(x){let s=x.params,u=D(x),y=x.random,v,T=[],p={x:0,y:0},N=t=>{let e=Array.from({length:6},(d,a)=>({f:a+2,ph:t*13.1+a*2.7,amp:.22/(a+1.2)}));return d=>1+e.reduce((a,l)=>a+Math.sin(d*l.f+l.ph)*l.amp,0)};function S(t,e,d,a,l){let h=N(l),f=new Path2D;for(let i=0;i<=160;i++){let r=i/160*Math.PI*2,n=a*h(r),o=e+Math.cos(r)*n*1.25,c=d+Math.sin(r)*n*.8;i===0?f.moveTo(o,c):f.lineTo(o,c)}f.closePath();for(let i=3;i>=1;i--)t.save(),t.translate(e,d),t.scale(1+i*.07,1+i*.09),t.translate(-e,-d),t.strokeStyle=M(s.sea,.35-i*.07),t.lineWidth=1.1,t.setLineDash([6,5]),t.stroke(f),t.restore();t.setLineDash([]),t.fillStyle=s.land,t.fill(f),t.strokeStyle=s.ink,t.lineWidth=2,t.stroke(f),t.save(),t.clip(f),t.strokeStyle=M(s.ink,.12),t.lineWidth=1;for(let i=e-a*2;i<e+a*2;i+=7)t.beginPath(),t.moveTo(i,d-a*1.5),t.lineTo(i+a*.6,d+a*1.5),t.stroke();t.restore(),t.strokeStyle=s.ink,t.lineWidth=1.6;for(let i=0;i<6;i++){let r=e+(y()-.5)*a*1.3,n=d+(y()-.5)*a*.6,o=a*(.12+y()*.08);t.beginPath(),t.moveTo(r-o,n+o*.4),t.lineTo(r,n-o*.8),t.lineTo(r+o,n+o*.4),t.stroke(),t.beginPath(),t.moveTo(r,n-o*.8),t.lineTo(r+o*.25,n+o*.4),t.stroke()}return f}function $(t,e,d,a){t.save(),t.translate(e,d),t.strokeStyle=s.ink,t.fillStyle=s.ink,t.lineWidth=1.2,t.beginPath(),t.arc(0,0,a,0,Math.PI*2),t.stroke(),t.beginPath(),t.arc(0,0,a*.82,0,Math.PI*2),t.stroke();for(let l=0;l<32;l++){let h=l/32*Math.PI*2;t.beginPath(),t.moveTo(Math.cos(h)*a*.82,Math.sin(h)*a*.82),t.lineTo(Math.cos(h)*a*(l%4?.9:.97),Math.sin(h)*a*(l%4?.9:.97)),t.stroke()}for(let l=0;l<8;l++){let h=l/8*Math.PI*2-Math.PI/2,f=l%2?a*.5:a*.8,i=a*.11;for(let r of[-1,1])t.beginPath(),t.moveTo(0,0),t.lineTo(Math.cos(h)*f,Math.sin(h)*f),t.lineTo(Math.cos(h+r*Math.PI/2)*i,Math.sin(h+r*Math.PI/2)*i),t.closePath(),r<0?t.fill():t.stroke()}t.font=`600 ${a*.36}px Georgia,serif`,t.textAlign="center",t.fillText("N",0,-a*1.08),t.restore()}function A(){let t=Math.ceil(u.w),e=Math.ceil(u.h),d=Math.min(2,x.dpr);v=document.createElement("canvas"),v.width=t*d,v.height=e*d;let a=v.getContext("2d");a.scale(d,d),a.fillStyle=s.paper,a.fillRect(0,0,t,e);for(let o=0;o<26;o++){let c=y()*t,b=y()*e,k=40+y()*220,m=a.createRadialGradient(c,b,0,c,b,k);m.addColorStop(0,M(s.ink,.07*y())),m.addColorStop(1,M(s.ink,0)),a.fillStyle=m,a.fillRect(c-k,b-k,k*2,k*2)}a.strokeStyle=M(s.ink,.05);for(let o=0;o<t*e/900;o++){let c=y()*t,b=y()*e;a.beginPath(),a.moveTo(c,b),a.lineTo(c+(y()-.5)*30,b+(y()-.5)*6),a.stroke()}let l=t*.84,h=e*.22;a.strokeStyle=M(s.ink,.12),a.lineWidth=.8;for(let o=0;o<16;o++){let c=o/16*Math.PI*2;a.beginPath(),a.moveTo(l,h),a.lineTo(l+Math.cos(c)*t*1.5,h+Math.sin(c)*t*1.5),a.stroke()}let f=Math.min(t,e)*.17;S(a,t*.2,e*.36,f,1.7),S(a,t*.43,e*.18,f*.42,4.2),S(a,t*.36,e*.62,f*.32,8.9),$(a,l,h,Math.min(t,e)*.075),a.fillStyle=s.ink,a.textAlign="center",a.font=`italic 600 ${Math.max(13,f*.16)}px Georgia,serif`,a.fillText("Terra Cognita",t*.2,e*.36+f*.06),a.font=`italic ${Math.max(12,f*.13)}px Georgia,serif`,a.fillStyle=M(s.ink,.7),a.fillText("M A R E I N C O G N I T U M",t*.66,e*.52);let i=a.createRadialGradient(t/2,e/2,Math.min(t,e)*.35,t/2,e/2,Math.max(t,e)*.75);i.addColorStop(0,M(s.ink,0)),i.addColorStop(1,M(s.ink,.5)),a.fillStyle=i,a.fillRect(0,0,t,e);let r={x:t*.25,y:e*.4};p={x:t*.74,y:e*.4},T=[];let n=[r,{x:t*.34,y:e*.47},{x:t*.47,y:e*.4},{x:t*.57,y:e*.3},{x:t*.66,y:e*.36},p];for(let o=0;o<n.length-1;o++){let c=n[Math.max(0,o-1)],b=n[o],k=n[o+1],m=n[Math.min(n.length-1,o+2)];for(let P=0;P<30;P++){let g=P/30,W=g*g,E=W*g,G=(C,w,I,q)=>.5*(2*w+(-C+I)*g+(2*C-5*w+4*I-q)*W+(-C+3*w-3*I+q)*E);T.push({x:G(c.x,b.x,k.x,m.x),y:G(c.y,b.y,k.y,m.y)})}}T.push(p)}return A(),{resize(){u.reset(),A()},frame(t){let e=u.g;u.reset(),e.drawImage(v,0,0,u.w,u.h);let d=x.reducedMotion?1:Math.min(1,Math.max(0,(t-.4)/3.2)),a=Math.floor(d*(T.length-1));e.fillStyle=s.red;let l=0;for(let r=1;r<=a;r++){let n=T[r-1],o=T[r];l+=Math.hypot(o.x-n.x,o.y-n.y),l>11&&(l=0,e.beginPath(),e.arc(o.x,o.y,2.2,0,Math.PI*2),e.fill())}let h=T[0];if(e.strokeStyle=s.red,e.lineWidth=2,e.beginPath(),e.arc(h.x,h.y,6,0,Math.PI*2),e.stroke(),e.font="italic 13px Georgia,serif",e.fillStyle=s.ink,e.textAlign="left",e.fillText("you were here",h.x+10,h.y+18),d>=1){let r=Math.min(1,(t-3.6)*3+(x.reducedMotion?1:0)),n=16*r;e.strokeStyle=s.red,e.lineWidth=4,e.lineCap="round",e.beginPath(),e.moveTo(p.x-n,p.y-n),e.lineTo(p.x+n,p.y+n),e.moveTo(p.x+n,p.y-n),e.lineTo(p.x-n,p.y+n),e.stroke(),e.fillStyle=s.ink,e.font=`italic 600 ${Math.max(14,u.w*.012)}px Georgia,serif`,e.textAlign="center",e.globalAlpha=r,e.fillText(`${x.copy.code}: here be dragons`,p.x,p.y+40),e.globalAlpha=1}if(s.serpent){let r=p.x+u.w*.04,n=p.y+u.h*.17;e.strokeStyle=s.ink,e.fillStyle=s.land,e.lineWidth=2;for(let b=0;b<4;b++){let k=t*1.2-b*.7,m=r-b*44,P=14+Math.sin(k)*5;e.beginPath(),e.moveTo(m-18,n),e.quadraticCurveTo(m,n-P*1.8,m+18,n),e.fill(),e.stroke(),e.beginPath(),e.moveTo(m-6,n-P*.75),e.lineTo(m-3,n-P*1.05),e.lineTo(m,n-P*.85),e.stroke(),e.beginPath(),e.moveTo(m-24,n+2),e.lineTo(m-16,n+2),e.moveTo(m+16,n+2),e.lineTo(m+24,n+2),e.stroke()}let o=r+36,c=n-22+Math.sin(t*1.2+.7)*4;e.beginPath(),e.moveTo(r+16,n),e.quadraticCurveTo(r+28,n-10,o,c),e.quadraticCurveTo(o+22,c-6,o+26,c+4),e.quadraticCurveTo(o+12,c+8,r+30,n),e.closePath(),e.fill(),e.stroke(),e.fillStyle=s.ink,e.beginPath(),e.arc(o+10,c-1,2,0,Math.PI*2),e.fill()}let f=x.reducedMotion?.55:t*.03%1,i=T[Math.floor(f*(T.length-1))];e.save(),e.translate(i.x,i.y-26+Math.sin(t*1.6)*2),e.rotate(Math.sin(t*1.3)*.08),e.strokeStyle=s.ink,e.fillStyle=s.land,e.lineWidth=1.6,e.beginPath(),e.moveTo(-16,0),e.lineTo(16,0),e.lineTo(10,8),e.lineTo(-10,8),e.closePath(),e.fill(),e.stroke(),e.beginPath(),e.moveTo(0,0),e.lineTo(0,-26),e.stroke(),e.beginPath(),e.moveTo(1,-24),e.quadraticCurveTo(14,-14,1,-4),e.closePath(),e.fill(),e.stroke(),e.restore()}}}};export{B as default};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var a=r=>r.replace(/[&<>"]/g,o=>({"&":"&","<":"<",">":">",'"':"""})[o]),w={id:"typewriter",name:"Typewriter",description:"An old typewriter types you a short, polite letter about the missing page, one clack at a time.",category:"Paper & Print",kind:"2d",motion:"live",tags:["dom","typewriter","vintage","letter","light","editorial","warm"],layout:"none",copy:{title:"A letter about your page",message:"",actions:[{label:"Return to the homepage",href:"/",variant:"primary"}]},params:{paper:"#fbf8f1",ink:"#1f1d1a",desk:"#3b2a1e",speed:28,letter:["Dear visitor,","","We regret to inform you that the page you","requested could not be found. We have looked","in the drawers, under the blotter and behind","the filing cabinet.","","It may have moved, or it may never have been.","","Yours faithfully,","The Management"]},theme:{bg:"#3b2a1e",fg:"#1f1d1a",accent:"#1f1d1a","accent-fg":"#fbf8f1"},presetName:"Office",presets:{noir:{name:"Detective's Report",params:{paper:"#efe8d6",ink:"#1a1a1a",desk:"#141414",letter:["CASE FILE 404","","Subject: one (1) web page.","Last seen: this address.","Status: missing.","","Leads: none. Suspects: a broken link.","Recommendation: return to the homepage.","","\u2014 Det. Lostpage"]},theme:{bg:"#141414",fg:"#1a1a1a",accent:"#1a1a1a","accent-fg":"#efe8d6"}},love:{name:"Love Letter",params:{paper:"#fff3f3",ink:"#6b0f1a",desk:"#c98a8a",letter:["My dearest visitor,","","I waited for you at this address,","but the page and I were never meant to be.","","Go home. I'll be fine.","","Forever not found,","404"]},theme:{bg:"#c98a8a",fg:"#6b0f1a",accent:"#6b0f1a","accent-fg":"#fff3f3"}},telegram:{name:"Telegram",params:{paper:"#f2e6b8",ink:"#111",desk:"#1d2a2a",letter:["TELEGRAM","","PAGE NOT FOUND STOP","SEARCHED EVERYWHERE STOP","PLEASE RETURN TO HOMEPAGE STOP","","END"]},theme:{bg:"#1d2a2a",fg:"#111",accent:"#111","accent-fg":"#f2e6b8"}}},css:`
|
|
2
|
+
& .tw{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--desk) 85%,#fff),var(--desk) 70%);overflow:hidden}
|
|
3
|
+
& .tw-sheet{position:relative;margin-top:clamp(20px,6cqh,70px);width:min(720px,92cqw);min-height:78cqh;background:var(--paper);color:var(--ink);padding:clamp(28px,6cqw,72px) clamp(24px,6cqw,80px);
|
|
4
|
+
box-shadow:0 30px 60px -25px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.04);transform:rotate(-.6deg);font:clamp(14px,1.45cqw,18.5px)/1.75 "Courier Prime","Courier New",ui-monospace,monospace}
|
|
5
|
+
& .tw-sheet::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply;pointer-events:none}
|
|
6
|
+
& .tw-head{display:flex;justify-content:space-between;font-size:.82em;opacity:.7;margin-bottom:2.2em}
|
|
7
|
+
& .tw-body{white-space:pre-wrap;min-height:12em}
|
|
8
|
+
& .tw-body span{opacity:.92;text-shadow:.3px 0 currentColor}
|
|
9
|
+
& .tw-caret{display:inline-block;width:.55em;height:1.1em;vertical-align:-.15em;background:currentColor;opacity:.5;animation:tw-c 1s steps(1) infinite}
|
|
10
|
+
@keyframes tw-c{50%{opacity:0}}
|
|
11
|
+
& .tw-code{position:absolute;right:clamp(20px,4cqw,48px);top:clamp(20px,4cqw,48px);font:700 clamp(26px,3cqw,40px)/1 inherit;color:#b3261e;border:3px solid #b3261e;padding:.15em .35em;transform:rotate(8deg);opacity:0;transition:opacity .4s,transform .4s}
|
|
12
|
+
& .tw-code.on{opacity:.85;transform:rotate(-8deg) scale(1)}
|
|
13
|
+
& .tw-act{margin-top:2.4em;opacity:0;transition:opacity .6s}
|
|
14
|
+
& .tw-act.on{opacity:1}
|
|
15
|
+
& .tw-act a{color:var(--ink);font-weight:700}
|
|
16
|
+
@media (prefers-reduced-motion:reduce){& .tw-caret{animation:none}}
|
|
17
|
+
`,setup(r){let o=r.params,s=r.copy,m=new Date().toLocaleDateString(void 0,{day:"numeric",month:"long",year:"numeric"}),e=document.createElement("div");e.className="tw",e.style.setProperty("--paper",o.paper),e.style.setProperty("--ink",o.ink),e.style.setProperty("--desk",o.desk);let c=o.letter.join(`
|
|
18
|
+
`);e.innerHTML=`<div class="tw-sheet"><div class="tw-code" aria-hidden="true">${a(s.code)}</div>
|
|
19
|
+
<div class="tw-head"><span>Ref. ${a(s.code)}/${a(typeof location<"u"?location.pathname:"/")}</span><span>${a(m)}</span></div>
|
|
20
|
+
<h1 class="lp-sr">Error ${a(s.code)}: ${a(s.title)}</h1><p class="lp-sr">${a(c)}</p>
|
|
21
|
+
<div class="tw-body" aria-hidden="true"><span></span><i class="tw-caret"></i></div>
|
|
22
|
+
<div class="tw-act">${s.actions.map(i=>`<a href="${a(i.href??"/")}">${a(i.label)} \u2192</a>`).join("<br>")}</div></div>`,r.root.append(e);let f=e.querySelector(".tw-body span"),g=e.querySelector(".tw-code"),h=e.querySelector(".tw-act"),u=e.querySelector(".tw-sheet");e.querySelectorAll(".tw-act a").forEach(i=>i.addEventListener("click",n=>{n.metaKey||n.ctrlKey||(n.preventDefault(),r.navigate(i.getAttribute("href"),n))}));let p=-1;return{frame(i){let n=r.reducedMotion?1e9:(i-.6)*1e3,t=0;for(;t<c.length&&n>0;){let d=c[t];n-=o.speed*(d===`
|
|
23
|
+
`?9:".,".includes(d)?5:1+t*7919%5*.25),n>0&&t++}t!==p&&(p=t,f.textContent=c.slice(0,t),r.reducedMotion||(u.style.transform=`rotate(-.6deg) translateX(${t%2*.6}px)`));let l=t>=c.length;g.classList.toggle("on",l),h.classList.toggle("on",l)},destroy(){e.remove()}}}};export{w as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as x}from"./chunk-4ZBXB36L.js";import{f as s}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var G={id:"ufo",name:"Abducted",description:"A flying saucer hovers over a quiet field and beams your page up, page by page. Move the pointer and it follows.",category:"Space",kind:"2d",motion:"live",tags:["canvas","ufo","aliens","funny","night","illustration","interactive"],layout:"bottom",codeInScene:!1,copy:{eyebrow:"Close encounter",title:"Your page was abducted.",message:"Witnesses saw a bright light, then the page was gone. We're negotiating its return. Meanwhile, the homepage is safe.",actions:[{label:"Return to Earth",href:"/",variant:"primary"}]},params:{skyTop:"#050a1f",skyBottom:"#1b2a55",ground:"#0b1a14",ship:"#c9d1de",beam:"#b7ffcf",lights:["#ff5a5a","#ffd25a","#5affb0","#5ac8ff"],stars:!0},theme:{bg:"#0b1a14",fg:"#eaf6ff",accent:"#b7ffcf","accent-fg":"#04140c","code-color":"rgba(183,255,207,.9)"},presetName:"Farm Night",presets:{city:{name:"City Rooftops",eyebrow:"Over the city",params:{skyTop:"#0a0618",skyBottom:"#3a1f5a",ground:"#0d0a14",ship:"#d9dce6",beam:"#d9b3ff",lights:["#ff3bd4","#3bd6ff","#ffffff"]},theme:{bg:"#0d0a14",accent:"#d9b3ff","accent-fg":"#12052a","code-color":"rgba(217,179,255,.9)"}},snow:{name:"Snowfield",params:{skyTop:"#1a2a44",skyBottom:"#7a94b8",ground:"#e6eef6",ship:"#a9b4c4",beam:"#fff6c2",stars:!0},theme:{bg:"#e6eef6",fg:"#0f1a2a",accent:"#0f1a2a","accent-fg":"#fff","code-color":"rgba(15,26,42,.85)"}},desert:{name:"Desert",params:{skyTop:"#1a0f2e",skyBottom:"#c4623a",ground:"#5a2e1a",beam:"#fff2b3",ship:"#e0d6c8"},theme:{bg:"#5a2e1a",accent:"#fff2b3","accent-fg":"#2a1206","code-color":"rgba(255,242,179,.9)"}},retro:{name:"B-Movie",eyebrow:"They came from page 404",params:{skyTop:"#0d0d0d",skyBottom:"#3a3a3a",ground:"#151515",ship:"#e6e6e6",beam:"#ffffff",lights:["#ffffff","#bbbbbb"],stars:!0},theme:{bg:"#151515",accent:"#fff","accent-fg":"#000","font-display":'"Courier New",ui-monospace,monospace',"code-color":"#fff"}},day:{name:"Broad Daylight",eyebrow:"In broad daylight",params:{skyTop:"#6fb6ff",skyBottom:"#d9f0ff",ground:"#5aa35a",ship:"#8a94a6",beam:"#fff6a6",stars:!1},theme:{bg:"#5aa35a",fg:"#0d2a12",accent:"#0d2a12","accent-fg":"#fff","code-color":"rgba(13,42,18,.85)"}}},css:"& .lp-code{--lp-code-size:clamp(64px,8cqw,120px);font-weight:800}",setup(b){let r=b.params,o=x(b),m=b.random,k=[],u=[],n=0,v=0,P=()=>{k=Array.from({length:220},()=>[m()*o.w,m()*o.h*.7,m()]),n=o.w*.5};P();let B=(f,p,e,a,g,c)=>{f.save(),f.translate(p,e),f.rotate(g),f.scale(Math.cos(g*1.7),1),f.globalAlpha=c,f.fillStyle="#ffffff",f.fillRect(-a*.36,-a/2,a*.72,a),f.fillStyle="#c9ced6";for(let d=0;d<6;d++)f.fillRect(-a*.26,-a*.36+d*a*.13,a*(d===0?.3:.52),a*.05);f.fillStyle="#ff5a5a",f.font=`800 ${a*.22}px Inter,Arial,sans-serif`,f.textAlign="center",f.fillText(b.copy.code,0,a*.42),f.restore()};return{resize(){o.reset(),P()},frame(f,p){let e=o.g;o.reset();let a=o.h*.74,g=e.createLinearGradient(0,0,0,a);if(g.addColorStop(0,r.skyTop),g.addColorStop(1,r.skyBottom),e.fillStyle=g,e.fillRect(0,0,o.w,o.h),r.stars)for(let[t,i,T]of k)e.fillStyle=`rgba(255,255,255,${.3+.7*T*(.6+.4*Math.sin(f*2+t))})`,e.fillRect(t,i,1.4,1.4);e.fillStyle=s("#fff6dd",r.stars?.9:.5),e.beginPath(),e.arc(o.w*.86,o.h*.14,Math.min(o.w,o.h)*.045,0,Math.PI*2),e.fill(),e.fillStyle=s(r.ground,1),e.beginPath(),e.moveTo(0,o.h);for(let t=0;t<=o.w;t+=12)e.lineTo(t,a-Math.sin(t*.004+1)*o.h*.03-Math.sin(t*.011)*o.h*.012);e.lineTo(o.w,o.h),e.fill();let c=o.w*.14;e.fillStyle=s("#000000",.55),e.beginPath(),e.moveTo(c,a),e.lineTo(c,a-60),e.lineTo(c+45,a-95),e.lineTo(c+90,a-60),e.lineTo(c+90,a),e.fill(),e.fillStyle=s(r.lights[1]??"#ffd25a",.8),e.fillRect(c+38,a-58,14,14);let d=b.pointer.engaged?b.pointer.x:o.w*(.5+Math.sin(f*.3)*.18);n+=(d-n)*Math.min(1,p*1.5);let h=o.h*.2+Math.sin(f*1.4)*8,l=Math.min(o.w*.26,300),y=l*.4,w=e.createLinearGradient(0,h,0,a);w.addColorStop(0,s(r.beam,.55)),w.addColorStop(1,s(r.beam,.08)),e.fillStyle=w,e.beginPath(),e.moveTo(n-y*.3,h+l*.08),e.lineTo(n+y*.3,h+l*.08),e.lineTo(n+y*1.4,a+6),e.lineTo(n-y*1.4,a+6),e.closePath(),e.fill(),e.fillStyle=s(r.beam,.25),e.beginPath(),e.ellipse(n,a+4,y*1.4,10,0,0,Math.PI*2),e.fill(),p>0&&f-v>1.1&&(v=f,u.push({y:a-10,rot:m()*6,vr:(m()-.5)*2,x:(m()-.5)*y,alpha:1}));for(let t of u){t.y-=(a-h)*.12*p,t.rot+=t.vr*p;let i=(t.y-h)/(a-h);t.alpha=Math.min(1,i*4),B(e,n+t.x*i,t.y,Math.max(16,l*.16)*(.5+.5*i),t.rot,t.alpha)}u=u.filter(t=>t.y>h+10),e.save(),e.translate(n,h),e.rotate(Math.sin(f*.9)*.05+(d-n)*4e-4);let M=e.createRadialGradient(-l*.06,-l*.16,0,0,-l*.08,l*.2);M.addColorStop(0,"rgba(220,255,240,.95)"),M.addColorStop(1,s(r.beam,.35)),e.fillStyle=M,e.beginPath(),e.ellipse(0,-l*.06,l*.17,l*.15,0,Math.PI,0),e.fill();let S=e.createLinearGradient(0,-l*.08,0,l*.1);S.addColorStop(0,"#ffffff"),S.addColorStop(.45,r.ship),S.addColorStop(1,"#4a5160"),e.fillStyle=S,e.beginPath(),e.ellipse(0,0,l/2,l*.09,0,0,Math.PI*2),e.fill(),e.fillStyle="#3a404c",e.beginPath(),e.ellipse(0,l*.04,l*.24,l*.04,0,0,Math.PI*2),e.fill();for(let t=0;t<9;t++){let i=t/9*Math.PI*2+f*2,T=Math.cos(i)*l*.4,I=Math.sin(i)*l*.05;if(Math.sin(i)<-.2)continue;let C=r.lights[t%r.lights.length];e.fillStyle=C,e.shadowColor=C,e.shadowBlur=12,e.beginPath(),e.arc(T,I+l*.01,l*.018,0,Math.PI*2),e.fill()}e.shadowBlur=0,e.restore()}}}};export{G as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as A}from"./chunk-4ZBXB36L.js";import{f as R}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var H={id:"unplugged",name:"Unplugged",description:"Someone pulled the plug on this page. Drag the plug back into the socket and you'll be taken home.",category:"Physics",kind:"2d",motion:"live",tags:["canvas","physics","rope","drag","interactive","funny","light"],layout:"bottom-left",codeInScene:!1,copy:{eyebrow:"Connection lost",title:"Someone pulled the plug.",message:"This page lost power. Drag the plug into the socket to reconnect to the homepage.",actions:[{label:"Or just go home",href:"/",variant:"secondary",icon:"arrow"}]},params:{wall:"#f1eee8",cable:"#1d1d1f",plug:"#2a2a2c",socket:"#ffffff",spark:"#ffd23f"},theme:{bg:"#f1eee8",fg:"#1d1d1f",accent:"#1d1d1f","accent-fg":"#fff","code-color":"rgba(29,29,31,.12)"},presetName:"Studio",presets:{mint:{name:"Mint",params:{wall:"#dff5ec",cable:"#0f3b2a",plug:"#0f3b2a",socket:"#ffffff",spark:"#ffb000"},theme:{bg:"#dff5ec",fg:"#0f3b2a",accent:"#0f3b2a","accent-fg":"#fff","code-color":"rgba(15,59,42,.12)"}},dark:{name:"After Hours",params:{wall:"#18191c",cable:"#e9e9ea",plug:"#d9d9dc",socket:"#2a2c31",spark:"#5ad1ff"},theme:{bg:"#18191c",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#18191c","code-color":"rgba(242,242,242,.1)"}},orange:{name:"Safety Orange",params:{wall:"#ff6a2b",cable:"#1b1b1b",plug:"#1b1b1b",socket:"#fff4ec",spark:"#fff36b"},theme:{bg:"#ff6a2b",fg:"#1b1b1b",accent:"#1b1b1b","accent-fg":"#ff6a2b","code-color":"rgba(27,27,27,.14)"}}},css:"& .lp-code{--lp-code-size:clamp(110px,16cqw,240px);font-weight:900;letter-spacing:-.06em}",setup(f){let y=f.params,l=A(f),r=26,o=[],w=0,h=!1,s=!1,v=0,m=[],T=()=>({x:l.w*.78,y:l.h*.36}),q=()=>{o=[];let i=l.w*.22,n=-10;w=Math.min(l.h*.62,l.w*.5)/r;for(let e=0;e<r;e++){let g=i+Math.sin(e/3)*12,u=n+e*w*.95;o.push({x:g,y:u,px:g,py:u})}s=!1};return q(),f.on("pointerdown",i=>{if(i.target.closest("a,button"))return;let n=o[r-1];Math.hypot(f.pointer.x-n.x,f.pointer.y-n.y)<90&&(h=!0,s=!1)}),f.onWindow("pointerup",()=>{if(!h)return;h=!1;let i=T(),n=o[r-1];Math.hypot(n.x-(i.x-36),n.y-i.y)<70&&(s=!0,v=performance.now())}),{resize(){l.reset(),q()},frame(i,n){let e=l.g;l.reset();let g=T();if(n>0){let t=l.h*1.6;for(let c=1;c<r;c++){let a=o[c],b=(a.x-a.px)*.985,d=(a.y-a.py)*.985;a.px=a.x,a.py=a.y,a.x+=b,a.y+=d+t*n*n}let p=o[r-1];h?(p.x+=(f.pointer.x-p.x)*.6,p.y+=(f.pointer.y-p.y)*.6):s?(p.x=g.x-36,p.y=g.y):f.pointer.engaged||(p.x+=Math.sin(i*.9)*.9);for(let c=0;c<18;c++){o[0].x=l.w*.22,o[0].y=-10;for(let a=0;a<r-1;a++){let b=o[a],d=o[a+1],S=d.x-b.x,M=d.y-b.y,I=Math.hypot(S,M)||1,k=(I-w)/I,P=a===0?0:.5,W=a+1===r-1&&(h||s)?0:1-P;b.x+=S*k*P,b.y+=M*k*P,d.x-=S*k*W,d.y-=M*k*W}for(let a of o)a.y>l.h-8&&(a.y=l.h-8)}if(!s&&Math.random()<n*.9){let c=o[r-1];for(let a=0;a<12;a++)m.push({x:c.x+24,y:c.y,vx:(Math.random()-.3)*260,vy:(Math.random()-.7)*260,life:.4+Math.random()*.3})}}e.fillStyle=y.wall,e.fillRect(0,0,l.w,l.h),e.save(),e.translate(g.x,g.y),e.fillStyle="rgba(0,0,0,.12)",e.beginPath(),e.roundRect(-52,-68,116,156,18),e.fill(),e.fillStyle=y.socket,e.beginPath(),e.roundRect(-58,-78,116,156,18),e.fill(),e.strokeStyle="rgba(0,0,0,.12)",e.stroke(),e.fillStyle="rgba(0,0,0,.06)",e.beginPath(),e.arc(0,0,40,0,Math.PI*2),e.fill(),e.fillStyle="#1d1d1f",e.beginPath(),e.roundRect(-16,-14,8,28,3),e.roundRect(8,-14,8,28,3),e.fill();let u=s;e.fillStyle=u?"#3dff7a":Math.floor(i*2)%2?"#ff4d4d":"#7a1f1f",e.shadowColor=e.fillStyle,e.shadowBlur=10,e.beginPath(),e.arc(0,-56,5,0,Math.PI*2),e.fill(),e.shadowBlur=0,e.restore(),e.strokeStyle=y.cable,e.lineCap="round",e.lineJoin="round",e.lineWidth=9,e.beginPath(),e.moveTo(o[0].x,o[0].y);for(let t=1;t<r-1;t++){let p=(o[t].x+o[t+1].x)/2,c=(o[t].y+o[t+1].y)/2;e.quadraticCurveTo(o[t].x,o[t].y,p,c)}e.lineTo(o[r-1].x,o[r-1].y),e.stroke(),e.strokeStyle="rgba(255,255,255,.18)",e.lineWidth=2,e.stroke();let x=o[r-1],C=o[r-3],z=s?0:Math.atan2(x.y-C.y,x.x-C.x);e.save(),e.translate(x.x,x.y),e.rotate(z),e.fillStyle="#c9c9cc",e.fillRect(22,-12,22,6),e.fillRect(22,6,22,6),e.fillStyle=y.plug,e.beginPath(),e.roundRect(-20,-22,44,44,9),e.fill(),e.fillStyle="rgba(255,255,255,.12)",e.fillRect(-14,-18,30,4),e.restore();for(let t of m)t.x+=t.vx*n,t.y+=t.vy*n,t.vy+=900*n,t.life-=n,e.strokeStyle=R(y.spark,Math.max(0,t.life*2.5)),e.lineWidth=2,e.beginPath(),e.moveTo(t.x,t.y),e.lineTo(t.x-t.vx*.02,t.y-t.vy*.02),e.stroke();m=m.filter(t=>t.life>0),e.fillStyle=R(y.cable,.5),e.font="600 12px ui-monospace,Menlo,monospace",e.textAlign="center",e.fillText(s?"reconnecting\u2026":"drag the plug into the socket",g.x,g.y+104),s&&performance.now()-v>900&&(s=!1,v=1/0,f.navigate(f.copy.actions[0]?.href??"/"))}}}};export{H as default};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var m=o=>o.replace(/[&<>"]/g,s=>({"&":"&","<":"<",">":">",'"':"""})[s]),g=["\u{1F964}","\u{1F36B}","\u{1F36A}","\u{1F968}","\u{1F9C3}","\u{1F36C}","\u{1F35F}","\u{1F95C}","\u{1F369}","\u{1F9CB}","\u{1F36D}","\u{1F96F}"],f={id:"vending-machine",name:"Sold Out",description:"A glowing vending machine where every slot is stocked except yours. Type the code into the keypad and watch what happens.",category:"Playful",kind:"2d",motion:"interactive",tags:["dom","vending","funny","interactive","retro","neon","keypad"],layout:"right",copy:{eyebrow:"Slot 404",title:"This one's sold out.",message:"Everything else is in stock. Try the keypad, or pick something from the homepage.",actions:[{label:"Browse the homepage",href:"/",variant:"primary"}]},params:{body:"#d62839",glass:"#0d1424",accent:"#3dff8a"},theme:{bg:"#121826",fg:"#f2f5ff",accent:"#3dff8a","accent-fg":"#021208"},presetName:"Cola Red",presets:{green:{name:"Tea Machine",params:{body:"#2a7a4a",glass:"#06140c",accent:"#ffd23f"},theme:{accent:"#ffd23f","accent-fg":"#1a1400"}},blue:{name:"Midnight Blue",params:{body:"#1f4e9c",glass:"#081020",accent:"#7fd3ff"},theme:{accent:"#7fd3ff","accent-fg":"#04121f"}},tokyo:{name:"Tokyo White",params:{body:"#f2f2f2",glass:"#101418",accent:"#ff3b5c"},theme:{bg:"#e7e9ee",fg:"#101418",accent:"#ff3b5c","accent-fg":"#fff"}}},css:`
|
|
2
|
+
& .vm-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding-left:clamp(20px,10cqw,180px)}
|
|
3
|
+
& .vm{--u:clamp(8px,1.05cqh,12px);position:relative;width:calc(var(--u)*44);height:calc(var(--u)*72);background:linear-gradient(90deg,color-mix(in srgb,var(--body) 75%,#000),var(--body) 12%,var(--body) 88%,color-mix(in srgb,var(--body) 70%,#000));
|
|
4
|
+
border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*2.4);display:grid;grid-template-columns:1fr calc(var(--u)*10);gap:calc(var(--u)*1.6);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
|
|
5
|
+
& .vm::before{content:"";position:absolute;left:0;right:0;top:calc(var(--u)*-2.6);height:calc(var(--u)*3);border-radius:calc(var(--u)*1) calc(var(--u)*1) 0 0;background:color-mix(in srgb,var(--body) 80%,#fff)}
|
|
6
|
+
& .vm-glass{position:relative;background:var(--glass);border-radius:calc(var(--u)*.8);padding:calc(var(--u)*1.2);display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:calc(var(--u)*.8);
|
|
7
|
+
box-shadow:inset 0 0 calc(var(--u)*3) rgba(120,200,255,.25);overflow:hidden}
|
|
8
|
+
& .vm-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 30%,transparent 60%,rgba(255,255,255,.06));pointer-events:none}
|
|
9
|
+
& .vm-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-bottom:calc(var(--u)*.35) solid #9aa3b5}
|
|
10
|
+
& .vm-slot .it{font-size:calc(var(--u)*3.3);line-height:1;transition:transform .6s cubic-bezier(.5,0,.75,0)}
|
|
11
|
+
& .vm-slot .tag{font:700 calc(var(--u)*.95)/1 var(--lp-font-mono);color:#cfd6e6;margin-top:calc(var(--u)*.5)}
|
|
12
|
+
& .vm-slot.out .it{opacity:.18;filter:grayscale(1)}
|
|
13
|
+
& .vm-slot.out .so{position:absolute;inset:auto 0 calc(var(--u)*2.4);margin:auto;width:max-content;transform:rotate(-12deg);font:800 calc(var(--u)*1.1)/1 var(--lp-font);color:#fff;background:#e5484d;padding:calc(var(--u)*.35) calc(var(--u)*.6);border-radius:4px;letter-spacing:.08em}
|
|
14
|
+
& .vm-slot.drop .it{transform:translateY(calc(var(--u)*30))}
|
|
15
|
+
& .vm-side{display:flex;flex-direction:column;gap:calc(var(--u)*1.2)}
|
|
16
|
+
& .vm-screen{background:#071009;color:var(--accent);font:700 calc(var(--u)*1.5)/1.2 var(--lp-font-mono);padding:calc(var(--u)*.9);border-radius:6px;text-shadow:0 0 8px var(--accent);min-height:calc(var(--u)*6);display:flex;align-items:center;justify-content:center;text-align:center}
|
|
17
|
+
& .vm-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*.5)}
|
|
18
|
+
& .vm-keys button{aspect-ratio:1;border:0;border-radius:6px;background:linear-gradient(180deg,#f2f2f2,#c9ced6);font:800 calc(var(--u)*1.4)/1 var(--lp-font-mono);color:#222;cursor:pointer;box-shadow:0 3px 0 #8e949c;pointer-events:auto}
|
|
19
|
+
& .vm-keys button:active{transform:translateY(2px);box-shadow:0 1px 0 #8e949c}
|
|
20
|
+
& .vm-coin{height:calc(var(--u)*5);border-radius:6px;background:#0b0b0b;display:flex;align-items:center;justify-content:center}
|
|
21
|
+
& .vm-coin i{width:calc(var(--u)*.6);height:calc(var(--u)*3);background:#555;border-radius:3px}
|
|
22
|
+
& .vm-tray{grid-column:1/-1;height:calc(var(--u)*7);background:#0b0b0b;border-radius:calc(var(--u)*.8);box-shadow:inset 0 calc(var(--u)*.6) calc(var(--u)*1.2) rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;color:#666;font:700 calc(var(--u)*1.1)/1 var(--lp-font-mono);letter-spacing:.2em}
|
|
23
|
+
& .lp-overlay{padding-right:clamp(24px,8cqw,140px)}& .lp-head,& .lp-body{max-width:min(460px,40cqw)}
|
|
24
|
+
@container (max-width:820px){& .vm-wrap{justify-content:center;align-items:flex-start;padding:4cqh 0 0}& .vm{--u:clamp(6px,.8cqh,9px)}& .lp-overlay{justify-content:flex-end}& .lp-head,& .lp-body{max-width:none}& .lp-code{display:none}}
|
|
25
|
+
`,setup(o){let s=o.params,i=o.copy,r=document.createElement("div");r.className="vm-wrap",r.style.setProperty("--body",s.body),r.style.setProperty("--glass",s.glass),r.style.setProperty("--accent",s.accent);let p=g.map((e,a)=>{let c=a===7?i.code:`${String.fromCharCode(65+Math.floor(a/3))}${a%3+1}`;return{it:e,code:c,out:a===7}});r.innerHTML=`<div class="vm"><div class="vm-glass">${p.map((e,a)=>`<div class="vm-slot${e.out?" out":""}" data-i="${a}"><span class="it">${e.it}</span>${e.out?'<span class="so">SOLD OUT</span>':""}<span class="tag">${m(e.code)}</span></div>`).join("")}</div>
|
|
26
|
+
<div class="vm-side"><div class="vm-screen" aria-live="polite">INSERT<br>CODE</div><div class="vm-keys">${["1","2","3","4","5","6","7","8","9","A","0","B"].map(e=>`<button type="button" aria-label="Key ${e}">${e}</button>`).join("")}</div>
|
|
27
|
+
<div class="vm-coin"><i></i></div></div><div class="vm-tray">PUSH</div></div>`,o.stage.append(r),o.stage.removeAttribute("aria-hidden");let n=r.querySelector(".vm-screen"),t="",l=!1,u=e=>{l=!0;let a=p.findIndex(c=>c.code.toUpperCase()===e.toUpperCase());if(a<0)n.innerHTML="INVALID<br>CODE";else if(p[a].out)n.innerHTML=`${m(e)}<br>SOLD OUT`;else{n.innerHTML=`VENDING<br>${m(e)}`;let c=r.querySelector(`.vm-slot[data-i="${a}"]`);c.classList.add("drop"),setTimeout(()=>c.classList.remove("drop"),1600)}setTimeout(()=>{t="",l=!1,n.innerHTML="INSERT<br>CODE"},1800)};r.querySelectorAll(".vm-keys button").forEach(e=>e.addEventListener("click",()=>{if(l)return;t+=e.textContent,n.textContent=t;let a=i.code.startsWith(t)||/^[A-D][1-3]$/.test(t);(t.length>=i.code.length||/^[A-D][1-3]$/.test(t)||!a)&&u(t)}));let d=o.reducedMotion?-1:2.5,v=0;return{frame(e){d<0||o.pointer.engaged||l||e>d&&(v<i.code.length?(t+=i.code[v++],n.textContent=t,d=e+.45):(u(t),v=0,d=e+7))},destroy(){r.remove()}}}};export{f as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as P}from"./chunk-4ZBXB36L.js";import{f as y}from"./chunk-HXSSPN2I.js";import{a as f}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var v={id:"vinyl",name:"Broken Record",description:"A turntable spins a record pressed with the error. Every few seconds the needle skips back and the same groove plays again.",category:"Retro Tech",kind:"2d",motion:"live",tags:["canvas","vinyl","music","turntable","retro","warm","illustration"],layout:"right",copy:{eyebrow:"Now playing",title:"Sounds like a broken record.",message:"This page keeps skipping back to the same spot: not found, not found, not found. Change the record.",actions:[{label:"Change the record",href:"/",variant:"primary"}]},params:{deck:"#d9cbb4",record:"#111111",label:"#e4572e",labelInk:"#fff4e6",bg:"#f2e8d8"},theme:{bg:"#f2e8d8",fg:"#2a1a0d",accent:"#2a1a0d","accent-fg":"#fff"},presetName:"Walnut",presets:{black:{name:"Studio Black",params:{deck:"#1d1d20",record:"#0a0a0a",label:"#f2f2f2",labelInk:"#111111",bg:"#0e0e10"},theme:{bg:"#0e0e10",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#000"}},color:{name:"Coloured Vinyl",params:{deck:"#f4f1ea",record:"#c2185b",label:"#ffd23f",labelInk:"#3a0a22",bg:"#ffe6ee"},theme:{bg:"#ffe6ee",fg:"#3a0a22",accent:"#3a0a22"}},jazz:{name:"Blue Note",params:{deck:"#16202e",record:"#0b0b0b",label:"#2b59ff",labelInk:"#ffffff",bg:"#0d1622"},theme:{bg:"#0d1622",fg:"#e6eeff",accent:"#e6eeff","accent-fg":"#0d1622"}}},css:`& .lp-overlay{padding-right:clamp(24px,8cqw,140px)}& .lp-head,& .lp-body{max-width:min(460px,40cqw)}
|
|
2
|
+
@container (max-width:760px){& .lp-head,& .lp-body{max-width:none}& .lp-overlay{justify-content:flex-end}}`,setup(c){let n=c.params,t=P(c),k=0,o=0;return{resize(){t.reset()},frame(x,S){let e=t.g;t.reset(),e.fillStyle=n.bg,e.fillRect(0,0,t.w,t.h);let s=t.w<760,a=s?Math.min(t.w*.36,t.h*.24):Math.min(t.h*.36,t.w*.24),l=s?t.w/2:t.w*.32,r=s?t.h*.3:t.h*.5;e.fillStyle="rgba(0,0,0,.18)",e.beginPath(),e.roundRect(l-a*1.3+10,r-a*1.2+16,a*2.75,a*2.4,a*.08),e.fill(),e.fillStyle=n.deck,e.beginPath(),e.roundRect(l-a*1.3,r-a*1.2,a*2.75,a*2.4,a*.08),e.fill(),k+=S*(33.3/60)*Math.PI*2,o+=S;let u=0;o>2.6&&(o=0,u=1),e.fillStyle="#2a2a2a",e.beginPath(),e.arc(l,r,a*1.04,0,Math.PI*2),e.fill(),e.save(),e.translate(l,r),e.rotate(k),e.fillStyle=n.record,e.beginPath(),e.arc(0,0,a,0,Math.PI*2),e.fill(),e.strokeStyle=y("#ffffff",.05),e.lineWidth=1;for(let m=a*.38;m<a*.98;m+=3)e.beginPath(),e.arc(0,0,m,0,Math.PI*2),e.stroke();e.fillStyle=n.label,e.beginPath(),e.arc(0,0,a*.34,0,Math.PI*2),e.fill(),e.fillStyle=n.labelInk,e.textAlign="center",e.textBaseline="middle",e.font=`900 ${a*.16}px ${f}`,e.fillText(c.copy.code,0,-a*.06),e.font=`700 ${a*.045}px ${f}`,e.fillText("NOT FOUND \xB7 33\u2153 RPM",0,a*.1),e.fillStyle="#ddd",e.beginPath(),e.arc(0,0,a*.025,0,Math.PI*2),e.fill(),e.restore();let i=e.createLinearGradient(l-a,r-a,l+a,r+a);i.addColorStop(.3,"rgba(255,255,255,0)"),i.addColorStop(.5,"rgba(255,255,255,.12)"),i.addColorStop(.7,"rgba(255,255,255,0)"),e.fillStyle=i,e.beginPath(),e.arc(l,r,a,0,Math.PI*2),e.fill();let d=l+a*1.15,b=r-a*.85,g=2.25+(u?-.04:0)+Math.sin(x*40)*.002;e.fillStyle="#c9c9cc",e.beginPath(),e.arc(d,b,a*.11,0,Math.PI*2),e.fill(),e.strokeStyle="#d9d9dc",e.lineWidth=a*.035,e.lineCap="round";let h=d+Math.cos(g)*a*1.05,p=b+Math.sin(g)*a*1.05;e.beginPath(),e.moveTo(d,b),e.lineTo(h,p),e.stroke(),e.fillStyle="#3a3a3a",e.save(),e.translate(h,p),e.rotate(g+.4),e.fillRect(-a*.04,-a*.07,a*.08,a*.16),e.restore(),o<.25&&(e.fillStyle=y(n.label,1-o*4),e.font=`700 ${a*.09}px ${f}`,e.fillText("*skip*",h+a*.2,p-a*.1))}}}};export{v as default};
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import{b as u}from"./chunk-JLRXT2AZ.js";import{a as m}from"./chunk-LMRCHEWX.js";import{a as s,c as d}from"./chunk-QJZBGT2Q.js";import{e as a}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var p=`
|
|
2
|
+
uniform sampler2D uGrid;
|
|
3
|
+
uniform vec3 uDim;
|
|
4
|
+
uniform vec3 uTop, uSide, uSide2, uBg, uBg2, uGround;
|
|
5
|
+
uniform float uLook;
|
|
6
|
+
${s}
|
|
7
|
+
${d}
|
|
8
|
+
|
|
9
|
+
bool filled(ivec3 c) {
|
|
10
|
+
if (c.x < 0 || c.y < 0 || c.z < 0 || c.x >= int(uDim.x) || c.y >= int(uDim.y) || c.z >= int(uDim.z)) return false;
|
|
11
|
+
return texelFetch(uGrid, ivec2(c.x, int(uDim.y) - 1 - c.y), 0).r > 0.5;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
vec2 boxHit(vec3 ro, vec3 rd, vec3 bmin, vec3 bmax) {
|
|
15
|
+
vec3 inv = 1.0 / rd;
|
|
16
|
+
vec3 t0 = (bmin - ro) * inv, t1 = (bmax - ro) * inv;
|
|
17
|
+
vec3 tn = min(t0, t1), tf = max(t0, t1);
|
|
18
|
+
return vec2(max(max(tn.x, tn.y), tn.z), min(min(tf.x, tf.y), tf.z));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
void main() {
|
|
22
|
+
vec2 fc = gl_FragCoord.xy;
|
|
23
|
+
vec2 uv = (fc - 0.5 * uRes) / uRes.y;
|
|
24
|
+
float t = uTime;
|
|
25
|
+
vec3 col = mix(uBg2, uBg, smoothstep(-0.5, 0.6, uv.y));
|
|
26
|
+
float yaw = sin(t * 0.35) * 0.55 + uMouse.x * 0.6;
|
|
27
|
+
float pitch = 0.32 + sin(t * 0.27) * 0.08 - uMouse.y * 0.2;
|
|
28
|
+
float aspect = uRes.x / uRes.y;
|
|
29
|
+
float dist = max(uDim.x * 1.9 / (0.74 * min(aspect, 2.0)), uDim.y * 1.9 / 0.42);
|
|
30
|
+
vec3 target = vec3(0.0, uDim.y * 0.08, 0.0);
|
|
31
|
+
vec3 ro = target + dist * vec3(sin(yaw) * cos(pitch), sin(pitch), cos(yaw) * cos(pitch));
|
|
32
|
+
vec3 fw = normalize(target - ro);
|
|
33
|
+
vec3 rt = normalize(cross(fw, vec3(0, 1, 0)));
|
|
34
|
+
vec3 up = cross(rt, fw);
|
|
35
|
+
vec3 rd = normalize(fw * 1.9 + rt * uv.x + up * (uv.y - 0.22));
|
|
36
|
+
vec3 off = -uDim * 0.5;
|
|
37
|
+
// ground plane with a soft shadow of the blocks
|
|
38
|
+
float tg = (-uDim.y * 0.5 - 0.02 - ro.y) / rd.y;
|
|
39
|
+
if (tg > 0.0) {
|
|
40
|
+
vec3 gp = ro + rd * tg;
|
|
41
|
+
vec2 g = gp.xz;
|
|
42
|
+
float fade = exp(-length(g) / (uDim.x * 0.9));
|
|
43
|
+
vec3 gc = mix(col, uGround, fade);
|
|
44
|
+
// fake shadow: project the footprint straight down, blurred
|
|
45
|
+
vec2 sh = (gp.xz - off.xz) ;
|
|
46
|
+
float occ = 0.0;
|
|
47
|
+
for (int i = 0; i < 8; i++) {
|
|
48
|
+
vec2 o = vec2(cos(float(i) * 0.785), sin(float(i) * 0.785)) * 1.5;
|
|
49
|
+
ivec3 cc = ivec3(floor(vec3(sh.x + o.x + 2.0, 0.0, sh.y + o.y + 1.0)));
|
|
50
|
+
for (int y = 0; y < 64; y++) { if (float(y) >= uDim.y) break; if (filled(ivec3(cc.x, y, cc.z))) { occ += 1.0; break; } }
|
|
51
|
+
}
|
|
52
|
+
gc *= 1.0 - occ / 8.0 * 0.45 * fade;
|
|
53
|
+
col = gc;
|
|
54
|
+
}
|
|
55
|
+
vec2 bh = boxHit(ro, rd, off, off + uDim);
|
|
56
|
+
if (bh.x < bh.y && bh.y > 0.0) {
|
|
57
|
+
vec3 p = ro + rd * max(bh.x, 0.0) - off;
|
|
58
|
+
ivec3 c = ivec3(floor(clamp(p, vec3(0.0), uDim - 0.001)));
|
|
59
|
+
vec3 stepv = sign(rd);
|
|
60
|
+
vec3 tDelta = abs(1.0 / rd);
|
|
61
|
+
vec3 tMax = (vec3(c) + max(stepv, 0.0) - p) / rd;
|
|
62
|
+
vec3 n = vec3(0.0);
|
|
63
|
+
// which face we entered through
|
|
64
|
+
vec3 e = p - vec3(c);
|
|
65
|
+
if (bh.x > 0.0) {
|
|
66
|
+
vec3 d = min(e, 1.0 - e);
|
|
67
|
+
n = d.x < d.y && d.x < d.z ? vec3(-stepv.x, 0, 0) : d.y < d.z ? vec3(0, -stepv.y, 0) : vec3(0, 0, -stepv.z);
|
|
68
|
+
}
|
|
69
|
+
bool hit = false;
|
|
70
|
+
for (int i = 0; i < 220; i++) {
|
|
71
|
+
if (filled(c)) { hit = true; break; }
|
|
72
|
+
if (tMax.x < tMax.y && tMax.x < tMax.z) { c.x += int(stepv.x); tMax.x += tDelta.x; n = vec3(-stepv.x, 0, 0); }
|
|
73
|
+
else if (tMax.y < tMax.z) { c.y += int(stepv.y); tMax.y += tDelta.y; n = vec3(0, -stepv.y, 0); }
|
|
74
|
+
else { c.z += int(stepv.z); tMax.z += tDelta.z; n = vec3(0, 0, -stepv.z); }
|
|
75
|
+
if (c.x < -1 || c.y < -1 || c.z < -1 || c.x > int(uDim.x) || c.y > int(uDim.y) || c.z > int(uDim.z)) break;
|
|
76
|
+
}
|
|
77
|
+
if (hit) {
|
|
78
|
+
float th = max(max(max(tMax.x - tDelta.x, tMax.y - tDelta.y), tMax.z - tDelta.z), 0.0);
|
|
79
|
+
vec3 hp = p + rd * th;
|
|
80
|
+
vec3 f = fract(hp);
|
|
81
|
+
float rnd = hash13(vec3(c));
|
|
82
|
+
vec3 base;
|
|
83
|
+
if (uLook < 0.5) {
|
|
84
|
+
bool topFace = n.y > 0.5;
|
|
85
|
+
bool grassRim = !filled(c + ivec3(0, 1, 0)) && f.y > 0.82 && n.y < 0.5;
|
|
86
|
+
base = topFace || grassRim ? uTop : mix(uSide, uSide2, step(0.5, hash13(floor(hp * 4.0))));
|
|
87
|
+
} else base = mix(uSide, uSide2, rnd * 0.5) * (n.y > 0.5 ? 1.15 : 1.0);
|
|
88
|
+
vec3 L = normalize(vec3(0.5, 0.9, 0.4));
|
|
89
|
+
float dif = 0.45 + 0.55 * max(dot(n, L), 0.0);
|
|
90
|
+
// edge darkening for the chunky look
|
|
91
|
+
vec2 fe = n.x != 0.0 ? f.yz : n.y != 0.0 ? f.xz : f.xy;
|
|
92
|
+
float edge = smoothstep(0.0, 0.08, min(min(fe.x, 1.0 - fe.x), min(fe.y, 1.0 - fe.y)));
|
|
93
|
+
// occlusion from the neighbour above
|
|
94
|
+
float ao = filled(c + ivec3(0, 1, 0)) && n.y < 0.5 ? 0.85 : 1.0;
|
|
95
|
+
col = base * dif * ao * (0.75 + 0.25 * edge) * (0.92 + 0.08 * rnd);
|
|
96
|
+
if (uLook > 1.5) col = mix(uBg2 * 0.6, uTop * 1.6, 1.0 - edge) + base * 0.15;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
col = toSRGB(col);
|
|
100
|
+
fragColor = vec4(col, 1.0);
|
|
101
|
+
}
|
|
102
|
+
`,y={id:"voxel-404",name:"Voxel Blocks",description:"The error built out of chunky 3D blocks, grass on top and dirt underneath, turning slowly on its own little patch of ground.",category:"Typography",kind:"3d",motion:"live",tags:["webgl","voxel","blocks","3d","pixel","game","playful"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Chunk not loaded",title:"This part of the world isn't generated.",message:"You've wandered past the render distance. Respawn at the homepage.",actions:[{label:"Respawn",href:"/",variant:"primary"}]},params:{top:"#5fbf3a",side:"#8a5a32",side2:"#7a4e2a",bg:"#8fd0ff",bg2:"#d9f0ff",ground:"#c9e6b8",depth:4,look:0},theme:{bg:"#b9e2ff",fg:"#10202e",accent:"#10202e","accent-fg":"#fff","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Grassland",presets:{snow:{name:"Tundra",params:{top:"#ffffff",side:"#7a8a99",side2:"#6b7a88",bg:"#c9d8e6",bg2:"#f2f6fa",ground:"#ffffff"},theme:{bg:"#e6eef5"}},desert:{name:"Sandstone",params:{top:"#f2d9a0",side:"#d9b874",side2:"#c9a35a",bg:"#ffb38a",bg2:"#ffe6c7",ground:"#f2d9a0",look:1},theme:{bg:"#ffd8b8",fg:"#2a1405"}},candy:{name:"Candy Blocks",params:{top:"#ffc2d9",side:"#ff8fb1",side2:"#b9a6ff",bg:"#fff2f8",bg2:"#ffffff",ground:"#ffe6f0",look:1},theme:{bg:"#fff2f8",fg:"#3a0a22"}},nether:{name:"Netherrack",params:{top:"#ff5a1f",side:"#6b1a1a",side2:"#4a1010",bg:"#1a0505",bg2:"#3a0a08",ground:"#2a0808",look:1},theme:{bg:"#1a0505",fg:"#ffe0d6",accent:"#ff7a3d","accent-fg":"#1a0505"}},neon:{name:"Wireframe",params:{top:"#3bffe6",side:"#0a1a2a",side2:"#081420",bg:"#02060c",bg2:"#06101c",ground:"#02060c",look:2},theme:{bg:"#02060c",fg:"#e6fffb",accent:"#3bffe6","accent-fg":"#02060c"}}},setup(c){let t=c.params,o=26,i=9,l=u(c.copy.code||"404",o,i,900),n=new Uint8Array(o*i);for(let e=0;e<i;e++)for(let f=0;f<o;f++)n[e*o+f]=l[e*o+f]?255:0;let r;return m(c,{frag:p,init(e){r=e.createTexture(),e.bindTexture(e.TEXTURE_2D,r),e.pixelStorei(e.UNPACK_ALIGNMENT,1),e.texImage2D(e.TEXTURE_2D,0,e.R8,o,i,0,e.RED,e.UNSIGNED_BYTE,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST)},uniforms:()=>({uGrid:r,uDim:[o,i,t.depth],uTop:a(t.top),uSide:a(t.side),uSide2:a(t.side2),uBg:a(t.bg),uBg2:a(t.bg2),uGround:a(t.ground),uLook:t.look})})}};export{y as default};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import{a as c}from"./chunk-LMRCHEWX.js";import{a as o,b as f,c as l}from"./chunk-QJZBGT2Q.js";import{e as a}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var n=`
|
|
2
|
+
uniform vec3 uA, uB, uGlow, uBase;
|
|
3
|
+
uniform float uSpeed, uStyle, uRadius, uFog;
|
|
4
|
+
${o}
|
|
5
|
+
${f}
|
|
6
|
+
${l}
|
|
7
|
+
|
|
8
|
+
vec2 path(float z) { return vec2(sin(z * 0.11) * 3.2 + sin(z * 0.047) * 2.0, cos(z * 0.09) * 2.4 + sin(z * 0.031) * 1.4); }
|
|
9
|
+
|
|
10
|
+
float map(vec3 p) {
|
|
11
|
+
vec2 c = path(p.z);
|
|
12
|
+
float r = uRadius;
|
|
13
|
+
if (uStyle > 1.5 && uStyle < 2.5) {
|
|
14
|
+
vec2 dir = normalize(p.xy - c + 1e-4);
|
|
15
|
+
r += 0.22 * sin(p.z * 0.9 + uTime) + 0.16 * vnoise3(vec3(dir * 1.5, p.z * 0.6));
|
|
16
|
+
}
|
|
17
|
+
return (r - length(p.xy - c)) * 0.8;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
vec3 wallColor(vec3 p, vec3 n, float dist) {
|
|
21
|
+
vec2 c = path(p.z);
|
|
22
|
+
float ang = atan(p.y - c.y, p.x - c.x);
|
|
23
|
+
float u = ang / 6.28318 + 0.5;
|
|
24
|
+
float z = p.z;
|
|
25
|
+
vec3 col = uBase;
|
|
26
|
+
if (uStyle < 0.5) {
|
|
27
|
+
// neon grid
|
|
28
|
+
float gx = abs(fract(u * 24.0) - 0.5);
|
|
29
|
+
float gz = abs(fract(z * 0.5) - 0.5);
|
|
30
|
+
float line = smoothstep(0.05, 0.0, min(gx, gz * 0.9) - 0.004);
|
|
31
|
+
vec3 lc = mix(uA, uB, 0.5 + 0.5 * sin(z * 0.08 + uTime * 0.4));
|
|
32
|
+
col += lc * line * 2.2;
|
|
33
|
+
col += lc * 0.1 * exp(-min(gx, gz) * 14.0);
|
|
34
|
+
} else if (uStyle < 1.5) {
|
|
35
|
+
// light rings
|
|
36
|
+
float rz = abs(fract(z * 0.12) - 0.5);
|
|
37
|
+
float ring = smoothstep(0.03, 0.0, rz - 0.005);
|
|
38
|
+
float halo = exp(-rz * 18.0);
|
|
39
|
+
vec3 lc = mix(uA, uB, 0.5 + 0.5 * sin(floor(z * 0.12) * 1.7));
|
|
40
|
+
float panel = smoothstep(0.02, 0.0, abs(fract(u * 16.0) - 0.5) - 0.47);
|
|
41
|
+
col = uBase * (0.6 + 0.4 * vnoise(vec2(u * 80.0, z * 3.0))) + uBase * panel * 0.5;
|
|
42
|
+
col += lc * (ring * 4.0 + halo * 0.35);
|
|
43
|
+
} else if (uStyle < 2.5) {
|
|
44
|
+
// organic: veins and wet highlights
|
|
45
|
+
vec2 dir = normalize(p.xy - c + 1e-4);
|
|
46
|
+
float v = fbm3(vec3(dir * 2.2, z * 0.45 - uTime * 0.1));
|
|
47
|
+
float vein = smoothstep(0.025, 0.0, abs(v - 0.5));
|
|
48
|
+
col = mix(uBase, uA, smoothstep(0.3, 0.8, v)) * 0.8;
|
|
49
|
+
col += uB * vein * 0.6;
|
|
50
|
+
} else {
|
|
51
|
+
// data hex
|
|
52
|
+
vec2 q = vec2(u * 32.0, z * 1.1);
|
|
53
|
+
vec2 id = floor(q);
|
|
54
|
+
float h = hash12(id);
|
|
55
|
+
float on = step(0.72, fract(h + uTime * 0.25 * hash12(id + 3.0)));
|
|
56
|
+
vec2 f = fract(q) - 0.5;
|
|
57
|
+
float cell = smoothstep(0.42, 0.36, max(abs(f.x), abs(f.y)));
|
|
58
|
+
col += mix(uA, uB, h) * on * cell * 1.6;
|
|
59
|
+
col += uA * 0.05 * cell;
|
|
60
|
+
}
|
|
61
|
+
return col;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
void main() {
|
|
65
|
+
vec2 fc = gl_FragCoord.xy;
|
|
66
|
+
vec2 uv = (fc - 0.5 * uRes) / uRes.y;
|
|
67
|
+
float t = uTime * uSpeed;
|
|
68
|
+
float z0 = t * 6.0;
|
|
69
|
+
vec3 ro = vec3(path(z0), z0);
|
|
70
|
+
vec3 ta = vec3(path(z0 + 6.0), z0 + 6.0);
|
|
71
|
+
ta.xy += uMouse * 1.2;
|
|
72
|
+
vec3 fw = normalize(ta - ro);
|
|
73
|
+
vec3 rt = normalize(cross(vec3(sin(t * 0.07) * 0.3, 1.0, 0.0), fw));
|
|
74
|
+
vec3 up = cross(fw, rt);
|
|
75
|
+
vec3 rd = normalize(fw * 1.3 + rt * uv.x + up * uv.y);
|
|
76
|
+
|
|
77
|
+
float d = 0.0;
|
|
78
|
+
vec3 p = ro;
|
|
79
|
+
for (int i = 0; i < 90; i++) {
|
|
80
|
+
p = ro + rd * d;
|
|
81
|
+
float h = map(p);
|
|
82
|
+
if (h < 0.002 * d + 0.001) break;
|
|
83
|
+
d += h * 0.7;
|
|
84
|
+
if (d > 80.0) break;
|
|
85
|
+
}
|
|
86
|
+
vec3 col;
|
|
87
|
+
float fogT = 1.0 - exp(-d * uFog);
|
|
88
|
+
if (d < 80.0) {
|
|
89
|
+
vec2 e = vec2(0.01, 0.0);
|
|
90
|
+
vec3 n = normalize(vec3(map(p + e.xyy) - map(p - e.xyy), map(p + e.yxy) - map(p - e.yxy), map(p + e.yyx) - map(p - e.yyx)));
|
|
91
|
+
col = wallColor(p, n, d);
|
|
92
|
+
float head = max(dot(n, -rd), 0.0);
|
|
93
|
+
if (uStyle > 1.5 && uStyle < 2.5) col *= 0.35 + 0.9 * head;
|
|
94
|
+
float spec = pow(max(dot(reflect(rd, n), -rd), 0.0), 30.0);
|
|
95
|
+
col += uGlow * spec * 0.25;
|
|
96
|
+
} else {
|
|
97
|
+
col = uGlow;
|
|
98
|
+
}
|
|
99
|
+
// light at the end of the tunnel
|
|
100
|
+
vec3 far = vec3(path(z0 + 70.0), z0 + 70.0);
|
|
101
|
+
float g = max(dot(rd, normalize(far - ro)), 0.0);
|
|
102
|
+
vec3 fogCol = mix(uBase * 0.4, uGlow * 1.2, pow(g, 160.0));
|
|
103
|
+
col = mix(col, fogCol, fogT);
|
|
104
|
+
col += uGlow * (pow(g, 900.0) * 2.5 + pow(g, 90.0) * 0.12);
|
|
105
|
+
|
|
106
|
+
col = aces(col);
|
|
107
|
+
col = toSRGB(col);
|
|
108
|
+
col *= mix(0.6, 1.0, vignette(vUv, 0.3));
|
|
109
|
+
col += grain(fc, uTime) * 0.015;
|
|
110
|
+
fragColor = vec4(col, 1.0);
|
|
111
|
+
}
|
|
112
|
+
`,g={id:"wormhole",name:"Wormhole",description:"An endless flight down a curving 3D tunnel toward the light at the end. Steer it with the pointer.",category:"Space",kind:"3d",motion:"live",tags:["webgl","raymarching","tunnel","neon","flight","synthwave","sci-fi"],layout:"center",copy:{eyebrow:"Wrong turn in spacetime",title:"This wormhole goes nowhere.",message:"We followed the link through the tunnel and came out at a page that doesn't exist.",actions:[{label:"Return to origin",href:"/",variant:"primary"}]},params:{a:"#ff2bd6",b:"#22d3ff",glow:"#fff1ff",base:"#07020f",speed:1,style:0,radius:2.4,fog:.035},theme:{bg:"#07020f","code-color":"rgba(255,255,255,.92)",accent:"#ffffff","accent-fg":"#12001f"},presetName:"Neon Grid",presets:{sunset:{name:"Sunset Grid",params:{a:"#ff7a1f",b:"#b026ff",glow:"#ffe2c2",base:"#12030f",style:0},theme:{bg:"#12030f",accent:"#ff9a4a","accent-fg":"#12030f"}},gold:{name:"Golden Rings",params:{a:"#ffd36b",b:"#fff2c9",glow:"#fff8e6",base:"#0d0802",style:1,radius:2.8},theme:{bg:"#0d0802",accent:"#ffd36b","accent-fg":"#0d0802"}},toxic:{name:"Toxic Gut",eyebrow:"Something's not right",title:"Swallowed by the internet.",params:{a:"#5ac83a",b:"#e6ff6b",glow:"#f0ffd0",base:"#0b1a05",style:2,fog:.05},theme:{bg:"#0b1a05",accent:"#e6ff6b","accent-fg":"#0b1a05"}},mono:{name:"Wireframe",params:{a:"#ffffff",b:"#9a9a9a",glow:"#ffffff",base:"#000000",style:0,speed:.7},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}},rings:{name:"Light Rings",params:{a:"#ffb547",b:"#ff5a36",glow:"#fff4e0",base:"#0a0603",style:1,radius:2.6},theme:{bg:"#0a0603",accent:"#ffb547","accent-fg":"#1a0d00"}},organic:{name:"Organic",eyebrow:"Something swallowed it",title:"This page got eaten.",message:"We're deep inside something and the page isn't in here. Let's get out.",params:{a:"#b8324f",b:"#ffc2a8",glow:"#ffe0d4",base:"#2a060e",style:2,radius:2.2,fog:.05},theme:{bg:"#2a060e",accent:"#ffd2c2","accent-fg":"#2a060e"}},data:{name:"Data Stream",eyebrow:"Packet lost",title:"Lost in transit.",message:"Your request went down the pipe and never came back out.",params:{a:"#39ff88",b:"#00b3ff",glow:"#d9ffe9",base:"#010604",style:3,radius:2.3},theme:{bg:"#010604",accent:"#39ff88","accent-fg":"#00170a","font-display":"var(--lp-font-mono)"}},ice:{name:"Ice Cave",params:{a:"#bfe9ff",b:"#5fb7ff",glow:"#ffffff",base:"#0b2a44",style:1,radius:2.5,fog:.045,speed:.6},theme:{bg:"#0b2a44",accent:"#e6f6ff","accent-fg":"#0b2a44"}}},css:`& .lp-code{font-weight:700;letter-spacing:-.04em;text-shadow:0 0 40px rgba(255,255,255,.35)}
|
|
113
|
+
& .lp-title{font-weight:600}`,setup(t){let e=t.params;return c(t,{frag:n,uniforms:()=>({uA:a(e.a),uB:a(e.b),uGlow:a(e.glow),uBase:a(e.base),uSpeed:e.speed,uStyle:e.style,uRadius:e.radius,uFog:e.fog})})}};export{g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S}from"./chunk-4ZBXB36L.js";import{f as d}from"./chunk-HXSSPN2I.js";import{a as M}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var C={id:"zen-garden",name:"Zen Garden",description:"A raked sand garden with three stones, the error drawn into the gravel. Drag to rake new lines and breathe.",category:"Nature",kind:"2d",motion:"interactive",tags:["canvas","zen","calm","sand","draw","interactive","light","minimal"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Breathe",title:"Let go of this page.",message:"It isn't here, and that's alright. Rake the sand for a while, then return home.",actions:[{label:"Return, mindfully",href:"/",variant:"primary"}]},params:{sand:"#e8e1d3",groove:"#c9bfa9",stone:"#6b6760",moss:"#6b8a4a"},theme:{bg:"#e8e1d3",fg:"#3a352c",accent:"#3a352c","accent-fg":"#f4efe6","font-display":"var(--lp-font-serif)","title-weight":"400"},presetName:"Kyoto",presets:{moss:{name:"Moss Garden",params:{sand:"#d9dcc9",groove:"#b8bca5",stone:"#4a4a44",moss:"#3a6a2a"},theme:{bg:"#d9dcc9",fg:"#22281a"}},dark:{name:"Black Gravel",params:{sand:"#2a2a2c",groove:"#1b1b1d",stone:"#8a8a8f",moss:"#4a6a3a"},theme:{bg:"#2a2a2c",fg:"#ece8e0",accent:"#ece8e0","accent-fg":"#2a2a2c"}},rose:{name:"Rose Sand",params:{sand:"#efd9d2",groove:"#d8bdb3",stone:"#7a6a66",moss:"#7a8a5a"},theme:{bg:"#efd9d2",fg:"#3a2a28"}}},setup(i){let f=i.params,t=S(i),b=i.random,p,e,u=[],c=null,x=()=>Math.min(2,i.dpr),v=(r,s,n,o,w=46)=>{let a=Math.atan2(o-s,n-r),l=-Math.sin(a),m=Math.cos(a);for(let g=-3;g<=3;g++){let h=g/3*w*.5;e.strokeStyle=d(f.groove,.9),e.lineWidth=3,e.beginPath(),e.moveTo(r+l*h,s+m*h),e.lineTo(n+l*h,o+m*h),e.stroke(),e.strokeStyle=d("#ffffff",.35),e.lineWidth=1.2,e.beginPath(),e.moveTo(r+l*(h-2),s+m*(h-2)),e.lineTo(n+l*(h-2),o+m*(h-2)),e.stroke()}},k=()=>{let r=x();p=document.createElement("canvas"),p.width=t.w*r,p.height=t.h*r,e=p.getContext("2d"),e.scale(r,r),e.fillStyle=f.sand,e.fillRect(0,0,t.w,t.h);for(let n=0;n<t.w*t.h/18;n++)e.fillStyle=`rgba(${b()>.5?"255,255,255":"0,0,0"},${b()*.07})`,e.fillRect(b()*t.w,b()*t.h,1.2,1.2);for(let n=10;n<t.h;n+=14){e.strokeStyle=d(f.groove,.7),e.lineWidth=3,e.beginPath();for(let o=0;o<=t.w;o+=20)e.lineTo(o,n+Math.sin(o*.01+n)*1.5);e.stroke()}u=[{x:t.w*.16,y:t.h*.28,r:Math.min(t.w,t.h)*.07},{x:t.w*.84,y:t.h*.22,r:Math.min(t.w,t.h)*.05},{x:t.w*.78,y:t.h*.56,r:Math.min(t.w,t.h)*.035}];for(let n of u)for(let o=1;o<=5;o++)e.fillStyle=f.sand,e.beginPath(),e.ellipse(n.x,n.y,n.r*(1+o*.35)+6,n.r*(.7+o*.25)+6,0,0,Math.PI*2),e.fill();for(let n of u)for(let o=5;o>=1;o--)e.strokeStyle=d(f.groove,.85),e.lineWidth=3,e.beginPath(),e.ellipse(n.x,n.y,n.r*(1+o*.35),n.r*(.7+o*.25),0,0,Math.PI*2),e.stroke();let s=Math.min(t.w*.26,t.h*.36);e.font=`300 ${s}px ${M}`,e.textAlign="center",e.textBaseline="middle",e.lineJoin="round",e.strokeStyle=d(f.groove,1),e.lineWidth=s*.05,e.strokeText(i.copy.code||"404",t.w/2,t.h*.37),e.strokeStyle=d("#ffffff",.35),e.lineWidth=s*.012,e.strokeText(i.copy.code||"404",t.w/2-2,t.h*.37-2)};k(),i.on("pointermove",r=>{if(!(r.buttons||r.pointerType==="touch"))return c=null;let s={x:i.pointer.x,y:i.pointer.y};c&&Math.hypot(s.x-c.x,s.y-c.y)>3&&v(c.x,c.y,s.x,s.y),c=s}),i.on("pointerup",()=>c=null);let y=0;return{resize(){t.reset(),k()},frame(r,s){let n=t.g;if(t.reset(),!i.pointer.engaged&&!i.reducedMotion&&s>0&&y<1){let a=y;y=Math.min(1,y+s*.08);let l=h=>({x:t.w*(.05+h*.9),y:t.h*.66+Math.sin(h*12)*t.h*.03}),m=l(a),g=l(y);v(m.x,m.y,g.x,g.y,40)}n.drawImage(p,0,0,t.w,t.h);for(let a of u){n.fillStyle=d(f.moss,.85),n.beginPath(),n.ellipse(a.x,a.y+a.r*.25,a.r*1.25,a.r*.55,0,0,Math.PI*2),n.fill();let l=n.createRadialGradient(a.x-a.r*.3,a.y-a.r*.4,a.r*.1,a.x,a.y,a.r*1.1);l.addColorStop(0,d("#ffffff",.35)),l.addColorStop(.3,f.stone),l.addColorStop(1,d("#000000",.6)),n.fillStyle=l,n.beginPath(),n.ellipse(a.x,a.y,a.r,a.r*.78,-.2,0,Math.PI*2),n.fill()}let o=r*30%(t.w+100)-50,w=t.h*.1+r*18%(t.h*.7)+Math.sin(r*2)*10;n.fillStyle="#f4b6c2",n.beginPath(),n.ellipse(o,w,6,3,r*2,0,Math.PI*2),n.fill()}}}};export{C as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{c as h}from"./c/chunk-YNREKTFR.js";import"./c/chunk-QHXVYCR6.js";import"./c/chunk-LMRCHEWX.js";import"./c/chunk-QJZBGT2Q.js";import"./c/chunk-HXSSPN2I.js";import"./c/chunk-IETNWEVK.js";import{b as n}from"./c/chunk-URWX3LLV.js";var p=["scene","preset","code","eyebrow","heading","message","height","motion","theme","params","primary-label","primary-href","secondary-label","secondary-href","overlay","interactive","seed"],l=class extends HTMLElement{constructor(){super(...arguments);n(this,"handle",null);n(this,"sceneId",null);n(this,"custom",null)}connectedCallback(){var e;this.style.display||(this.style.display="block"),(e=this.style).position||(e.position="relative"),!this.custom&&this.childNodes.length&&[...this.childNodes].some(i=>i.nodeType===1||i.textContent?.trim())&&(this.custom=document.createElement("div"),this.custom.className="lp-custom",this.custom.append(...this.childNodes),this.append(this.custom)),this.start()}disconnectedCallback(){this.handle?.destroy(),this.handle=null,this.sceneId=null}attributeChangedCallback(e,i,t){!this.isConnected||i===t||(e==="scene"?this.start():this.handle?.update(this.options()))}options(){let e=s=>this.getAttribute(s)??void 0,i=s=>{let o=e(s);if(o)try{return JSON.parse(o)}catch{console.warn(`[lostpage] <lost-page ${s}> must be JSON`);return}},t={};e("preset")&&(t.preset=e("preset")),e("code")&&(t.code=e("code")),e("eyebrow")!==void 0&&(t.eyebrow=e("eyebrow")),e("heading")&&(t.title=e("heading")),e("message")&&(t.message=e("message")),e("height")&&(t.height=e("height")),e("motion")&&(t.motion=e("motion")),e("seed")&&(t.seed=Number(e("seed"))),this.hasAttribute("interactive")&&(t.interactive=e("interactive")!=="false"),this.hasAttribute("overlay")&&(t.overlay=e("overlay")!=="false"),this.custom&&(t.overlay=!1);let r=i("theme"),c=i("params");r&&(t.theme=r),c&&(t.params=c);let a=[];return e("primary-label")&&a.push({label:e("primary-label"),href:e("primary-href")??"/",variant:"primary"}),e("secondary-label")&&a.push({label:e("secondary-label"),href:e("secondary-href")??"/",variant:"secondary"}),a.length&&(t.actions=a),t.onNavigate=(s,o)=>{let d=new CustomEvent("lostpage:navigate",{detail:{href:s},cancelable:!0,bubbles:!0});this.dispatchEvent(d)&&(o.target?.closest?location.assign(s):location.href=s)},t}start(){let e=this.getAttribute("scene");!e||e===this.sceneId||(this.handle?.destroy(),this.sceneId=e,this.handle=h(this,e,this.options()))}};n(l,"observedAttributes",[...p]);typeof window<"u"&&!customElements.get("lost-page")&&customElements.define("lost-page",l);export{l as LostPageElement};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as j,b as k,c as l}from"./c/chunk-YNREKTFR.js";import"./c/chunk-QHXVYCR6.js";import{a as i}from"./c/chunk-LMRCHEWX.js";import{d as g,l as h}from"./c/chunk-QJZBGT2Q.js";import{h as e}from"./c/chunk-HXSSPN2I.js";import{h as f}from"./c/chunk-IETNWEVK.js";import{c as a,d as b,e as c,f as d}from"./c/chunk-URWX3LLV.js";export{b as DEFAULT_COPY,a as defineScene,h as gl,g as glsl,k as loadScene,l as mount,d as presetIds,c as resolve,j as sceneIds,i as shaderScene,f as text,e as util};
|