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,3 @@
|
|
|
1
|
+
import{a as D,f as T}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var H={id:"ascii-3d",name:"ASCII Donut",description:"A 3D extruded 404 spinning in plain text. Every frame is ASCII characters lit by a moving light, like the famous donut.c.",category:"Retro Tech",kind:"3d",motion:"live",tags:["dom","ascii","3d","developer","retro","monospace","text"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"char *page = NULL;",title:"Segmentation fault: page not found.",message:"We rendered the error in glorious ASCII, but the page itself never compiled.",actions:[{label:"cd ~",href:"/",variant:"primary"}]},params:{ramp:" .,-~:;=!*#$@",color:"#d6ffe4",bg:"#050806",cols:120,depth:.22},theme:{bg:"#050806",fg:"#d6ffe4",accent:"#d6ffe4","accent-fg":"#050806","font-display":"var(--lp-font-mono)","title-weight":"600"},presetName:"Phosphor",presets:{red:{name:"Alert",params:{color:"#ff4d4d",bg:"#0a0202"},theme:{bg:"#0a0202",fg:"#ffd6d6",accent:"#ff4d4d","accent-fg":"#0a0202"}},ice:{name:"Ice",params:{color:"#9fe8ff",bg:"#020a12",ramp:" .:-=+*#%@"},theme:{bg:"#020a12",fg:"#e6f9ff",accent:"#9fe8ff","accent-fg":"#020a12"}},paper:{name:"Typewriter",params:{color:"#1b1b1b",bg:"#f3efe6",ramp:" .:-=+*#%@"},theme:{bg:"#f3efe6",fg:"#1b1b1b",accent:"#1b1b1b","accent-fg":"#f3efe6"}},amber:{name:"Amber",params:{color:"#ffbf47",bg:"#0b0700"},theme:{bg:"#0b0700",fg:"#ffdf9e",accent:"#ffbf47","accent-fg":"#0b0700"}},blocks:{name:"Blocks",params:{ramp:" \u2591\u2592\u2593\u2588",color:"#9ab8ff",bg:"#070a14",cols:96},theme:{bg:"#070a14",fg:"#dfe7ff",accent:"#9ab8ff","accent-fg":"#070a14"}}},css:`& .a3{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:3cqh;overflow:hidden}
|
|
2
|
+
& .a3 pre{margin:0;font:600 var(--a3-size,10px)/1 var(--lp-font-mono);letter-spacing:0;white-space:pre;color:var(--a3-col)}`,setup(r){let s=r.params,c=document.createElement("div");c.className="a3",c.setAttribute("aria-hidden","true"),c.style.setProperty("--a3-col",s.color),c.style.background=s.bg;let E=document.createElement("pre");c.append(E),r.stage.append(c);let o=[],n=0,f=0,L=()=>{let p=Math.max(6,Math.min(14,r.width/s.cols/.6));n=Math.floor(r.width/(p*.6)),f=Math.floor(r.height*.66/p),c.style.setProperty("--a3-size",`${p}px`);let m=T(r.copy.code||"404",{width:400,height:150,font:D,weight:900,fit:.95,step:2}),d=new Set;for(let e=0;e<m.length;e+=2)d.add(`${Math.round(m[e]/2)},${Math.round(m[e+1]/2)}`);o=[];let h=(e,a)=>d.has(`${e},${a}`);for(let e of d){let[a,i]=e.split(",").map(Number),g=(a*2-200)/200,b=(i*2-75)/200;o.push(g,b,-s.depth,0,0,-1,g,b,s.depth,0,0,1);let v=[[1,0],[-1,0],[0,1],[0,-1]];for(let[l,u]of v)if(!h(a+l,i+u))for(let y=-s.depth;y<=s.depth;y+=.02)o.push(g+l*.005,b+u*.005,y,l,u,0)}};return L(),{resize:L,frame(p){let m=Math.sin(p*.55)*.95+r.pointer.sx*.5,d=Math.sin(p*.4)*.35+r.pointer.sy*.4,h=Math.cos(m),e=Math.sin(m),a=Math.cos(d),i=Math.sin(d),g=new Float32Array(n*f),b=new Array(n*f).fill(" "),v=s.ramp,l=[.5,-.6,-.62],u=Math.min(n*.42,f*1.6);for(let t=0;t<o.length;t+=6){let x=o[t],w=o[t+1],z=o[t+2],A=o[t+3],S=o[t+4],I=o[t+5],k=x*h+z*e,j=-x*e+z*h,P=w*a-j*i,q=w*i+j*a,F=A*h+I*e,B=-A*e+I*h,R=S*a-B*i,U=S*i+B*a,M=1/(q+2.6),$=Math.floor(n/2+k*u*M*2.6),N=Math.floor(f/2+P*u*.5*M*2.6);if($<0||N<0||$>=n||N>=f)continue;let C=N*n+$;if(M>g[C]){g[C]=M;let W=Math.max(0,F*l[0]+R*l[1]+U*l[2]);b[C]=v[Math.min(v.length-1,1+Math.floor(W*(v.length-1)))]}k=k,P=P}let y="";for(let t=0;t<f;t++)y+=b.slice(t*n,(t+1)*n).join("")+`
|
|
3
|
+
`;E.textContent=y},destroy(){c.remove()}}}};export{H as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as P}from"./chunk-4ZBXB36L.js";import{f as b}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var C={id:"astronaut",name:"Drifting Astronaut",description:"An astronaut tumbles slowly through space, tether snapped, holding a little 404 sign. Stars stream past in parallax as you move the pointer.",category:"Space",kind:"2d",motion:"live",tags:["canvas","space","astronaut","illustration","parallax","calm","classic"],layout:"left",copy:{eyebrow:"Houston, we have a problem",title:"Lost in space.",message:"The page you're looking for drifted out of orbit. We'll send a rescue team. Meanwhile, head back to base.",actions:[{label:"Back to base",href:"/",variant:"primary"}]},params:{bg:"#0b0b2e",bg2:"#1e0b3a",suit:"#f2f4f8",visor:"#1a2a55",accent:"#ff7a3d",planet:"#ff9f6b"},theme:{bg:"#0b0b2e",fg:"#f2f4ff",accent:"#ff7a3d","accent-fg":"#fff"},presetName:"Nebula",presets:{pink:{name:"Cotton Candy",params:{bg:"#2a0b3a",bg2:"#7a2a6b",visor:"#3a1a5a",accent:"#ff6bd6",planet:"#ffb3e6"},theme:{bg:"#2a0b3a",accent:"#ff6bd6","accent-fg":"#fff"}},sunrise:{name:"Sunrise",params:{bg:"#1a1030",bg2:"#ff7a5a",visor:"#2a1a3a",accent:"#ffd23f",planet:"#ff9a6b"},theme:{bg:"#1a1030",accent:"#ffd23f","accent-fg":"#1a1030"}},mono:{name:"Monochrome",params:{bg:"#000000",bg2:"#141414",suit:"#ffffff",visor:"#111111",accent:"#ffffff",planet:"#777777"},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}},teal:{name:"Teal Void",params:{bg:"#021a1f",bg2:"#06303a",visor:"#0d4a5a",accent:"#ffd23f",planet:"#3bd6c6"},theme:{bg:"#021a1f",accent:"#ffd23f","accent-fg":"#021a1f"}}},css:`& .lp-overlay{padding-left:max(16px,calc(var(--lp-pad) * 1.5))}& .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(s){let n=s.params,t=P(s),m=s.random,u=[],y=()=>u=Array.from({length:360},()=>({x:m()*t.w,y:m()*t.h,z:.2+m()*.8}));y();let v=(a,e,r=1)=>{a.fillStyle=r===1?n.suit:`rgba(0,0,0,${1-r})`,e(),a.fill()},M=(a,e,r)=>{let o=(d,p,i,h,f)=>{a.strokeStyle=n.suit,a.lineCap="round",a.lineWidth=f,a.beginPath(),a.moveTo(d,p),a.lineTo(i,h),a.stroke(),a.strokeStyle="rgba(0,0,0,.12)",a.lineWidth=f*.25,a.beginPath(),a.moveTo(d+f*.2,p+f*.15),a.lineTo(i+f*.2,h+f*.15),a.stroke()},c=Math.sin(r*1.3)*.15;a.fillStyle="#c9ced8",a.beginPath(),a.roundRect(-e*.36,-e*.42,e*.72,e*.78,e*.12),a.fill(),o(-e*.14,e*.3,-e*.3,e*.78+Math.sin(r)*e*.04,e*.2),o(e*.14,e*.3,e*.32,e*.72-Math.sin(r)*e*.04,e*.2),a.fillStyle=n.accent,a.beginPath(),a.roundRect(-e*.42,e*.74,e*.24,e*.12,e*.05),a.roundRect(e*.2,e*.68,e*.24,e*.12,e*.05),a.fill(),v(a,()=>{a.beginPath(),a.roundRect(-e*.3,-e*.32,e*.6,e*.7,e*.18)}),a.fillStyle=b(n.accent,.9),a.fillRect(-e*.14,-e*.08,e*.28,e*.14),a.fillStyle="#3bd6ff",a.fillRect(-e*.1,-e*.05,e*.05,e*.05),a.fillStyle="#3dff8a",a.fillRect(-e*.02,-e*.05,e*.05,e*.05),o(-e*.26,-e*.18,-e*.62,-e*.5+c*e,e*.17),o(e*.26,-e*.18,e*.6,e*.02,e*.17),a.save(),a.translate(e*.62,e*0),a.rotate(-.2+c*.4),a.fillStyle="#ffffff",a.beginPath(),a.roundRect(-e*.05,-e*.42,e*.6,e*.34,e*.04),a.fill(),a.fillStyle=n.accent,a.font=`900 ${e*.22}px Inter,Arial,sans-serif`,a.textAlign="center",a.textBaseline="middle",a.fillText(s.copy.code,e*.25,-e*.24),a.fillStyle="#c9ced8",a.fillRect(-e*.02,-e*.08,e*.04,e*.16),a.restore(),v(a,()=>{a.beginPath(),a.arc(0,-e*.52,e*.32,0,Math.PI*2)});let l=a.createLinearGradient(-e*.2,-e*.7,e*.2,-e*.36);l.addColorStop(0,b("#9fd3ff",.9)),l.addColorStop(.4,n.visor),l.addColorStop(1,"#05070f"),a.fillStyle=l,a.beginPath(),a.ellipse(e*.04,-e*.52,e*.24,e*.19,0,0,Math.PI*2),a.fill(),a.fillStyle="rgba(255,255,255,.6)",a.beginPath(),a.ellipse(-e*.06,-e*.6,e*.07,e*.035,-.5,0,Math.PI*2),a.fill(),a.strokeStyle=b(n.suit,.8),a.lineWidth=e*.025,a.beginPath(),a.moveTo(-e*.3,e*.1),a.bezierCurveTo(-e*.8,e*.3,-e*.9,e*.9+Math.sin(r*.8)*e*.1,-e*1.4,e*1),a.stroke()};return{resize(){t.reset(),y()},frame(a){let e=t.g;t.reset();let r=e.createRadialGradient(t.w*.7,t.h*.4,0,t.w*.7,t.h*.4,Math.max(t.w,t.h)*.8);r.addColorStop(0,n.bg2),r.addColorStop(1,n.bg),e.fillStyle=r,e.fillRect(0,0,t.w,t.h);for(let i of u){let h=(i.x+a*6*i.z-s.pointer.sx*30*i.z+t.w*4)%t.w,f=(i.y+a*2*i.z+s.pointer.sy*20*i.z+t.h*4)%t.h;e.fillStyle=`rgba(255,255,255,${.3+i.z*.6})`,e.fillRect(h,f,i.z*1.8,i.z*1.8)}let o=t.w*.9,c=t.h*.88,l=Math.min(t.w,t.h)*.26,d=e.createRadialGradient(o-l*.4,c-l*.5,l*.1,o,c,l);d.addColorStop(0,n.planet),d.addColorStop(1,b(n.planet,.15)),e.fillStyle=d,e.beginPath(),e.arc(o,c,l,0,Math.PI*2),e.fill(),e.strokeStyle=b(n.planet,.6),e.lineWidth=6,e.beginPath(),e.ellipse(o,c,l*1.6,l*.35,-.3,Math.PI*1.05,Math.PI*1.95),e.stroke();let p=Math.min(t.w,t.h)*.22;e.save(),e.translate(t.w*(t.w<760?.5:.66)+Math.sin(a*.3)*20+s.pointer.sx*10,t.h*(t.w<760?.32:.44)+Math.sin(a*.5)*16),e.rotate(Math.sin(a*.25)*.5+a*.06),M(e,p,a),e.restore()}}}};export{C as default};
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import{a as i}from"./chunk-LMRCHEWX.js";import{a,b as s,c as n}from"./chunk-QJZBGT2Q.js";import{e as o}from"./chunk-HXSSPN2I.js";import"./chunk-URWX3LLV.js";var f=`
|
|
2
|
+
uniform vec3 uLow, uHigh, uSkyTop, uSkyBottom, uMount;
|
|
3
|
+
uniform float uIntensity, uSpeed, uStars, uCabin, uSnow;
|
|
4
|
+
${a}
|
|
5
|
+
${s}
|
|
6
|
+
${n}
|
|
7
|
+
|
|
8
|
+
float shore = -0.05;
|
|
9
|
+
|
|
10
|
+
// aurora: stacked curtains, each a wavy ribbon with vertical rays that come and go along x
|
|
11
|
+
vec3 aurora(vec2 p, float t) {
|
|
12
|
+
vec3 acc = vec3(0.0);
|
|
13
|
+
for (int i = 0; i < 4; i++) {
|
|
14
|
+
float fi = float(i);
|
|
15
|
+
float x = p.x * (0.8 + fi * 0.15) + fi * 2.3;
|
|
16
|
+
float base = 0.1 + fi * 0.07 + 0.09 * sin(x * 1.1 + t * 0.17 + fi * 1.3) + 0.08 * (fbm(vec2(x * 0.7 - t * 0.04, fi * 4.0)) - 0.5);
|
|
17
|
+
float dy = p.y - base;
|
|
18
|
+
if (dy < -0.03) continue;
|
|
19
|
+
float env = smoothstep(0.4, 0.68, fbm(vec2(x * 0.45 + t * 0.025, fi * 9.0 + 3.0)));
|
|
20
|
+
float rays = 0.35 + 0.65 * pow(fbm(vec2(x * 18.0 + t * 0.35, fi * 3.0 + t * 0.07)), 1.5);
|
|
21
|
+
float fall = exp(-max(dy, 0.0) * (5.0 - fi * 0.5)) * smoothstep(-0.025, 0.01, dy);
|
|
22
|
+
vec3 c = mix(uLow, uHigh, smoothstep(0.02, 0.3, dy));
|
|
23
|
+
acc += c * fall * rays * env * (0.32 - fi * 0.05);
|
|
24
|
+
}
|
|
25
|
+
return acc * uIntensity;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
float ridge(float x, float seed) {
|
|
29
|
+
float h = 0.0, a = 0.5, f = 1.0;
|
|
30
|
+
for (int i = 0; i < 6; i++) {
|
|
31
|
+
h += a * (1.0 - abs(vnoise(vec2(x * f + seed, seed * 1.7)) * 2.0 - 1.0));
|
|
32
|
+
a *= 0.5; f *= 2.03;
|
|
33
|
+
}
|
|
34
|
+
return h;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
vec3 sky(vec2 p, float t) {
|
|
38
|
+
vec3 c = mix(uSkyBottom, uSkyTop, smoothstep(-0.15, 0.55, p.y));
|
|
39
|
+
vec2 g = p * 190.0;
|
|
40
|
+
vec2 id = floor(g);
|
|
41
|
+
float h = hash12(id);
|
|
42
|
+
vec2 lp = fract(g) - 0.5 - (hash22(id) - 0.5) * 0.7;
|
|
43
|
+
float tw = 0.6 + 0.4 * sin(uTime * (1.0 + h * 4.0) + h * 30.0);
|
|
44
|
+
c += vec3(0.85, 0.9, 1.0) * smoothstep(0.13, 0.0, length(lp)) * step(0.983, h) * tw * uStars * smoothstep(-0.1, 0.15, p.y);
|
|
45
|
+
c += aurora(p, t);
|
|
46
|
+
return c;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// everything above the waterline: sky, two mountain ranges, the forest banks and a cabin
|
|
50
|
+
vec3 above(vec2 p, float t, float px) {
|
|
51
|
+
vec3 c = sky(p, t);
|
|
52
|
+
vec3 glow = aurora(vec2(p.x, 0.12), t);
|
|
53
|
+
// far range with snow, lit by the aurora
|
|
54
|
+
float fx = p.x * 1.2 + 4.0;
|
|
55
|
+
float far = shore + 0.01 + ridge(fx, 3.0) * 0.24;
|
|
56
|
+
if (p.y < far) {
|
|
57
|
+
float slope = ridge(fx + 0.02, 3.0) - ridge(fx - 0.02, 3.0);
|
|
58
|
+
float line = shore + 0.12 + fbm(vec2(p.x * 6.0, 2.0)) * 0.04;
|
|
59
|
+
float snow = smoothstep(line - 0.01, line + 0.01, p.y) * smoothstep(-0.04, 0.0, -abs(slope) * 0.3);
|
|
60
|
+
vec3 rock = mix(uMount * 1.6, uSkyBottom, 0.45);
|
|
61
|
+
float lit = slope < 0.0 ? 1.0 : 0.35;
|
|
62
|
+
vec3 snowCol = (vec3(0.07, 0.09, 0.13) + glow * 0.7) * lit;
|
|
63
|
+
c = mix(rock, snowCol, snow * uSnow);
|
|
64
|
+
}
|
|
65
|
+
// near hills
|
|
66
|
+
float nx = p.x * 2.4 + 17.0;
|
|
67
|
+
float near = shore + 0.004 + ridge(nx, 7.0) * 0.075;
|
|
68
|
+
if (p.y < near) c = uMount * 1.1;
|
|
69
|
+
// forest banks rising toward both edges
|
|
70
|
+
float side = abs(p.x);
|
|
71
|
+
float bankH = smoothstep(0.25, 0.95, side) * 0.04;
|
|
72
|
+
if (p.y < shore + bankH) c = uMount * 0.7;
|
|
73
|
+
float w = 0.016;
|
|
74
|
+
float cell = floor(p.x / w);
|
|
75
|
+
for (int k = -1; k <= 1; k++) {
|
|
76
|
+
float id = cell + float(k);
|
|
77
|
+
float cx = (id + 0.5 + (hash11(id) - 0.5) * 0.6) * w;
|
|
78
|
+
float density = smoothstep(0.28, 0.6, abs(cx));
|
|
79
|
+
if (hash11(id + 5.0) > density) continue;
|
|
80
|
+
float ground = shore + smoothstep(0.25, 0.95, abs(cx)) * 0.04;
|
|
81
|
+
float h = (0.05 + 0.08 * hash11(id + 9.0)) * (0.6 + smoothstep(0.3, 1.0, abs(cx)) * 1.2);
|
|
82
|
+
float yy = (p.y - ground) / h;
|
|
83
|
+
if (yy < 0.0 || yy > 1.0) continue;
|
|
84
|
+
float halfW = (1.0 - yy) * h * 0.34 * (0.78 + 0.22 * abs(sin(yy * 26.0)));
|
|
85
|
+
float tree = smoothstep(px, -px, abs(p.x - cx) - halfW);
|
|
86
|
+
c = mix(c, uMount * 0.45, tree);
|
|
87
|
+
}
|
|
88
|
+
// cabin with a warm window
|
|
89
|
+
if (uCabin > 0.5) {
|
|
90
|
+
vec2 q = p - vec2(0.56, shore + smoothstep(0.25, 0.95, 0.56) * 0.04);
|
|
91
|
+
float body = step(abs(q.x), 0.03) * step(0.0, q.y) * step(q.y, 0.026);
|
|
92
|
+
float roof = step(abs(q.x) * 0.8 + (q.y - 0.026), 0.028) * step(0.026, q.y);
|
|
93
|
+
float win = step(abs(q.x - 0.008), 0.007) * step(abs(q.y - 0.011), 0.006);
|
|
94
|
+
c = mix(c, uMount * 0.4, max(body, roof));
|
|
95
|
+
vec3 warm = vec3(1.0, 0.6, 0.22);
|
|
96
|
+
c = mix(c, warm * 2.2, win);
|
|
97
|
+
c += warm * 0.3 * exp(-length(q - vec2(0.008, 0.011)) * 55.0);
|
|
98
|
+
}
|
|
99
|
+
return c;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
void main() {
|
|
103
|
+
vec2 fc = gl_FragCoord.xy;
|
|
104
|
+
vec2 uv = (fc - 0.5 * uRes) / uRes.y;
|
|
105
|
+
float t = uTime * uSpeed;
|
|
106
|
+
float px = 1.5 / uRes.y;
|
|
107
|
+
vec2 p = uv + uMouse * vec2(0.02, 0.01);
|
|
108
|
+
|
|
109
|
+
vec3 col;
|
|
110
|
+
if (p.y > shore) col = above(p, t, px);
|
|
111
|
+
else {
|
|
112
|
+
float d = shore - p.y;
|
|
113
|
+
float rip = sin(p.y * 220.0 / (d * 6.0 + 0.3) + uTime * 1.4) * 0.5 + sin(p.x * 40.0 + p.y * 300.0 + uTime) * 0.5;
|
|
114
|
+
vec2 rp = vec2(p.x + rip * 0.0025 * (0.3 + d * 4.0), shore + d);
|
|
115
|
+
col = above(rp, t, px) * 0.62;
|
|
116
|
+
col = mix(col, uSkyBottom * 0.3, smoothstep(0.05, 0.45, d) * 0.6);
|
|
117
|
+
// the near shoreline: a thin dark band of rocks and snow
|
|
118
|
+
col = mix(col, uMount * 0.5, smoothstep(0.004, 0.0, d - 0.002));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
col = aces(col * 1.15);
|
|
122
|
+
col = toSRGB(col);
|
|
123
|
+
col *= mix(0.78, 1.0, vignette(vUv, 0.2));
|
|
124
|
+
col += grain(fc, uTime) * 0.015;
|
|
125
|
+
fragColor = vec4(col, 1.0);
|
|
126
|
+
}
|
|
127
|
+
`,m={id:"aurora",name:"Northern Lights",description:"Aurora curtains over a frozen lake and mountains, a lone cabin glowing on the shore.",category:"Nature",kind:"2d",motion:"live",tags:["webgl","aurora","night","mountains","lake","calm","nature"],layout:"bottom",copy:{eyebrow:"Edge of the map",title:"Beautiful view. Wrong page.",message:"You've wandered somewhere the map doesn't cover. The lights are lovely, but the way home is this way.",actions:[{label:"Head back home",href:"/",variant:"primary"}]},params:{low:"#2bff9e",high:"#7a4dff",skyTop:"#01030a",skyBottom:"#06122a",mountains:"#03060d",intensity:1,speed:1,stars:1,cabin:!0,snow:1},theme:{bg:"#030814",accent:"#d8fff0","accent-fg":"#02130b","code-color":"rgba(220,255,240,.2)"},presetName:"Emerald",presets:{rainbow:{name:"Corona",params:{low:"#3bff9a",high:"#ff4fd8",intensity:1.15},theme:{accent:"#ffe6fb","accent-fg":"#1a0520"}},faint:{name:"Faint Glow",eyebrow:"Quiet night",params:{intensity:.55,stars:1.3,low:"#7bffc4",high:"#5a7bff"}},gold:{name:"Solar Gold",params:{low:"#ffe14d",high:"#6bff9a",skyBottom:"#0d1a12"},theme:{accent:"#fff3b0","accent-fg":"#1a1400"}},teal:{name:"Teal Fjord",params:{low:"#2bd4c9",high:"#2b8cff",skyBottom:"#031c24",mountains:"#010c10",cabin:!1},theme:{bg:"#031c24",accent:"#cffcff","accent-fg":"#031c24"}},violet:{name:"Violet",params:{low:"#b45cff",high:"#ff4fa0",skyBottom:"#0d0a26"},theme:{accent:"#f0dcff","accent-fg":"#12052a"}},crimson:{name:"Crimson Storm",eyebrow:"Solar storm",title:"A rare sky. A missing page.",params:{low:"#ff3b5c",high:"#ffb13b",skyBottom:"#1a0610",intensity:1.2},theme:{accent:"#ffd6dd","accent-fg":"#2a0610"}},ice:{name:"Glacier Blue",params:{low:"#3bd4ff",high:"#2b6bff",skyBottom:"#041a2e",mountains:"#02101c"},theme:{accent:"#dff6ff","accent-fg":"#031b2a"}},dusk:{name:"Polar Dusk",params:{low:"#3bffb1",high:"#ff8a5c",skyTop:"#0b1030",skyBottom:"#3a2a5c",mountains:"#0b0c1c",intensity:.7,stars:.5},theme:{bg:"#18163a",accent:"#ffe2d1","accent-fg":"#18163a"}}},css:`&{--lp-code-size:clamp(64px,9cqw,120px)}
|
|
128
|
+
& .lp-code{font-weight:300;letter-spacing:.04em;margin-bottom:6px}
|
|
129
|
+
& .lp-overlay{gap:0}`,setup(t){let e=t.params;return i(t,{frag:f,uniforms:()=>({uLow:o(e.low),uHigh:o(e.high),uSkyTop:o(e.skyTop),uSkyBottom:o(e.skyBottom),uMount:o(e.mountains),uIntensity:e.intensity,uSpeed:e.speed,uStars:e.stars,uCabin:e.cabin?1:0,uSnow:e.snow})})}};export{m as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as v}from"./chunk-4ZBXB36L.js";import{a as u,f as p}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var w={id:"autumn",name:"Autumn Leaves",description:"Leaves drift down on the breeze and settle on the lawn in the shape of the error. Sweep through them with the cursor to scatter them.",category:"Nature",kind:"2d",motion:"live",tags:["canvas","leaves","autumn","fall","cozy","warm","interactive","particles"],layout:"top",codeInScene:!0,copy:{eyebrow:"Season's change",title:"This page fell off the tree.",message:"It's somewhere in the pile. We'll rake it up eventually. For now, head inside.",actions:[{label:"Head inside",href:"/",variant:"primary"}]},params:{bg:"#f6e7cf",bg2:"#e9c99a",leaves:["#d9541e","#e98a1f","#c23b22","#f2b33d","#8a3a1a"],count:520},theme:{bg:"#f6e7cf",fg:"#3a1d0a",accent:"#3a1d0a","accent-fg":"#fff3e0"},presetName:"Maple",presets:{cherry:{name:"Cherry Blossom",eyebrow:"Spring",title:"Swept away with the blossoms.",params:{bg:"#fff4f6",bg2:"#ffe0e8",leaves:["#ffb7c5","#ff8fab","#ffd1dc","#ffffff"]},theme:{bg:"#fff4f6",fg:"#4a1a2a",accent:"#4a1a2a"}},dusk:{name:"October Dusk",params:{bg:"#2a1f3a",bg2:"#5a3a3a",leaves:["#ff7a3d","#ffb347","#d94a2a","#ffd27a"]},theme:{bg:"#2a1f3a",fg:"#ffeedd",accent:"#ffb347","accent-fg":"#2a1f3a"}},ginkgo:{name:"Ginkgo",params:{bg:"#f2f0e6",bg2:"#dfe3cf",leaves:["#f2c11d","#e8b30f","#ffd84d","#c99a0a"]},theme:{bg:"#f2f0e6",fg:"#2a2a10",accent:"#2a2a10"}}},setup(r){let d=r.params,o=v(r),s=r.random,m=[],b=()=>{let a=Math.min(o.w*.82,1100),t=Math.min(a*.38,o.h*.4),n=p(r.copy.code||"404",{width:a,height:t,font:u,weight:900,fit:.95,step:6,random:s}),f=Math.min(n.length/2,Math.round(d.count*Math.min(1.3,o.w/1440)));m=[];for(let c=0;c<f;c++){let e=Math.floor(c/f*(n.length/2)),i=n[e*2]+(o.w-a)/2+(s()-.5)*6,l=n[e*2+1]+o.h*.62-t/2+(s()-.5)*6;m.push({x:r.reducedMotion?i:s()*o.w,y:r.reducedMotion?l:-s()*o.h,tx:i,ty:l,vx:0,vy:0,a:s()*6,va:(s()-.5)*3,s:7+s()*7,col:d.leaves[Math.floor(s()*d.leaves.length)],landed:r.reducedMotion,delay:s()*2.2})}};b();let y=(a,t)=>{a.save(),a.translate(t.x,t.y),a.rotate(t.a),a.scale(1,t.landed?.75:.6+.4*Math.abs(Math.sin(t.a*1.7))),a.fillStyle=t.col,a.beginPath();for(let n=0;n<=10;n++){let f=n/10*Math.PI*2-Math.PI/2,c=n%2?t.s*.45:t.s;a.lineTo(Math.cos(f)*c,Math.sin(f)*c)}a.closePath(),a.fill(),a.strokeStyle="rgba(0,0,0,.18)",a.lineWidth=.8,a.beginPath(),a.moveTo(0,t.s*.9),a.lineTo(0,-t.s*.6),a.stroke(),a.restore()};return{resize(){o.reset(),b()},frame(a,t){let n=o.g;o.reset();let f=n.createLinearGradient(0,0,0,o.h);f.addColorStop(0,d.bg),f.addColorStop(1,d.bg2),n.fillStyle=f,n.fillRect(0,0,o.w,o.h),n.fillStyle="rgba(90,110,40,.12)",n.fillRect(0,o.h*.42,o.w,o.h);let c=Math.sin(a*.4)*30+20;for(let e of m){if(t>0){if(!e.landed){if(a<e.delay){y(n,e);continue}let i=e.tx-e.x,l=e.ty-e.y,h=Math.hypot(i,l);e.vx+=(Math.sin(a*2+e.s)*40+c*.5+i*1.6)*t,e.vy+=(60+l*1.1)*t,e.vx*=Math.exp(-2*t),e.vy*=Math.exp(-2*t),e.a+=e.va*t,h<9&&(e.landed=!0,e.x=e.tx,e.y=e.ty)}if(r.pointer.inside){let i=e.x-r.pointer.x,l=e.y-r.pointer.y,h=i*i+l*l;h<5e3&&(e.landed=!1,e.vx+=i/Math.sqrt(h+1)*600*t*10,e.vy-=400*t*10,e.va=(s()-.5)*8)}e.landed||(e.x+=e.vx*t,e.y+=e.vy*t)}y(n,e)}}}}};export{w as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a}from"./chunk-NUQBEDA4.js";import"./chunk-QJZBGT2Q.js";import"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var c={id:"balloon-404",name:"Foil Balloons",description:"Inflated foil-balloon numerals bobbing on their strings, crinkles catching the light.",category:"Playful",kind:"3d",motion:"live",tags:["webgl","raymarching","balloon","foil","party","metallic","playful"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Surprise!",title:"The party's not on this page.",message:"We blew up the balloons, but the page never showed. The fun is back home.",actions:[{label:"Back to the party",href:"/",variant:"primary"}]},params:{c1:"#c9ced8",c2:"#c9ced8",c3:"#c9ced8",bgTop:"#fbe9ef",bgBottom:"#f3cfdc"},theme:{bg:"#f7dde6",fg:"#2d1320",accent:"#2d1320","accent-fg":"#fff"},presetName:"Silver",presets:{birthday:{name:"Birthday",title:"Happy 404th birthday.",message:"The cake is here. The page isn't. Party's at the homepage.",params:{c1:"#ff3b3b",c2:"#2f6bff",c3:"#ffc83b",bgTop:"#fff7ec",bgBottom:"#ffe6c9"},theme:{bg:"#fff0dc",fg:"#2a1405",accent:"#2a1405","accent-fg":"#fff"}},pastel:{name:"Baby Shower",params:{c1:"#ffc2d1",c2:"#bde0fe",c3:"#cdb4db",bgTop:"#fffafc",bgBottom:"#f4e8ff"},theme:{bg:"#f9f0fb",fg:"#3a2440",accent:"#3a2440","accent-fg":"#fff"}},lime:{name:"Lime",params:{c1:"#a3e635",c2:"#a3e635",c3:"#a3e635",bgTop:"#14210a",bgBottom:"#070c03"},theme:{bg:"#0d1606",fg:"#f2ffe0",accent:"#a3e635","accent-fg":"#0d1606"}},violet:{name:"Ultraviolet",params:{c1:"#9b5cff",c2:"#9b5cff",c3:"#9b5cff",bgTop:"#f2ecff",bgBottom:"#d9c9ff"},theme:{bg:"#e6dcff",fg:"#1f0b47",accent:"#5b21b6","accent-fg":"#fff"}},gold:{name:"Gold",params:{c1:"#f2c45a",c2:"#f2c45a",c3:"#f2c45a",bgTop:"#1d1a2e",bgBottom:"#0d0b16"},theme:{bg:"#151222",fg:"#fbf3e0",accent:"#f2c45a","accent-fg":"#151222"}},rainbow:{name:"Rainbow",params:{c1:"#ff5d8f",c2:"#ffd25d",c3:"#5dd6ff",bgTop:"#f2f6ff",bgBottom:"#d6e2ff"},theme:{bg:"#e4ecff",fg:"#121a33",accent:"#121a33","accent-fg":"#fff"}},"rose-gold":{name:"Rose Gold",params:{c1:"#f0a99a",c2:"#f0a99a",c3:"#f0a99a",bgTop:"#fff4ef",bgBottom:"#f5d9d0"},theme:{bg:"#f9e5df",fg:"#3a1b14",accent:"#3a1b14","accent-fg":"#fff"}},blue:{name:"Electric Blue",params:{c1:"#4f7dff",c2:"#4f7dff",c3:"#4f7dff",bgTop:"#e9f0ff",bgBottom:"#c8d8ff"},theme:{bg:"#d8e4ff",fg:"#0c1638",accent:"#2e5bff","accent-fg":"#fff"}}},css:"& .lp-title{font-weight:700}",setup(e){let f=e.params;return a(e,{material:"foil",colors:{a:f.c1,b:f.c2,c:f.c3,bg0:f.bgTop,bg1:f.bgBottom,light:"#ffffff"},depth:.3,inflate:.2,spin:.25,float:.08,weight:900,strings:!0,floor:!1,envSpeed:.1,y:.14})}};export{c as default};
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import{a as p}from"./chunk-LMRCHEWX.js";import{a as i,b as h,c as u,h as m}from"./chunk-QJZBGT2Q.js";import{e as f}from"./chunk-HXSSPN2I.js";import{e as d}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var g=`
|
|
2
|
+
uniform sampler2D uText;
|
|
3
|
+
uniform vec3 uSand, uWet, uShallow, uDeep, uFoam;
|
|
4
|
+
uniform float uCycle, uReach, uShells;
|
|
5
|
+
${i}
|
|
6
|
+
${h}
|
|
7
|
+
${u}
|
|
8
|
+
|
|
9
|
+
const float SHORE = 0.74;
|
|
10
|
+
|
|
11
|
+
// wash cycle: 0 rest at shore, 1 = full reach
|
|
12
|
+
float wash(float c) {
|
|
13
|
+
float up = smoothstep(0.0, 0.2, c);
|
|
14
|
+
float down = 1.0 - smoothstep(0.26, 0.5, c);
|
|
15
|
+
return up * down;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
float edgeAt(float x, float w, float t) {
|
|
19
|
+
float n = fbm(vec2(x * 3.0, t * 0.15)) - 0.5;
|
|
20
|
+
return SHORE - w * uReach + n * 0.05 + sin(x * 6.0 + t * 0.6) * 0.008;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
void main() {
|
|
24
|
+
vec2 fc = gl_FragCoord.xy;
|
|
25
|
+
vec2 uv = fc / uRes;
|
|
26
|
+
vec2 p = vec2(uv.x * uRes.x / uRes.y, uv.y);
|
|
27
|
+
float t = uTime;
|
|
28
|
+
float c = fract(t / uCycle);
|
|
29
|
+
float w = wash(c);
|
|
30
|
+
float edge = edgeAt(p.x, w, t);
|
|
31
|
+
float peakEdge = edgeAt(p.x, 1.0, t);
|
|
32
|
+
|
|
33
|
+
// sand: grains + wind ripples
|
|
34
|
+
float rip = sin(p.y * 90.0 + fbm(p * 6.0) * 9.0 + p.x * 4.0) * 0.5 + 0.5;
|
|
35
|
+
float grains = hash12(floor(fc * 0.7)) * 0.5 + vnoise(p * 300.0) * 0.5;
|
|
36
|
+
vec3 sand = uSand * (0.9 + 0.08 * rip + 0.1 * (grains - 0.5));
|
|
37
|
+
// wet band left by this cycle's wave, drying after it recedes
|
|
38
|
+
float washed = step(peakEdge, uv.y);
|
|
39
|
+
float dry = smoothstep(0.5, 0.95, c);
|
|
40
|
+
float wetness = washed * (c > 0.2 ? 1.0 - dry * 0.85 : step(edge, uv.y));
|
|
41
|
+
wetness = max(wetness, smoothstep(SHORE - 0.06, SHORE, uv.y));
|
|
42
|
+
|
|
43
|
+
// writing in the sand: erased where this wave reached, redrawn as the beach dries
|
|
44
|
+
float rewrite = 1.0;
|
|
45
|
+
if (washed > 0.5) rewrite = c < 0.2 ? step(uv.y, edge) : smoothstep(0.55, 0.75, c);
|
|
46
|
+
float a = textureLod(uText, uv, 0.0).a;
|
|
47
|
+
float ab = textureLod(uText, uv, 2.0).a;
|
|
48
|
+
vec2 e = vec2(2.0 / uRes.x, 2.0 / uRes.y);
|
|
49
|
+
float gx = textureLod(uText, uv + vec2(e.x, 0.0), 1.5).a - textureLod(uText, uv - vec2(e.x, 0.0), 1.5).a;
|
|
50
|
+
float gy = textureLod(uText, uv + vec2(0.0, e.y), 1.5).a - textureLod(uText, uv - vec2(0.0, e.y), 1.5).a;
|
|
51
|
+
float groove = ab * rewrite;
|
|
52
|
+
// light from the top-left: walls of the groove facing the light are bright, others shaded
|
|
53
|
+
float lit = clamp(-(gx * 0.6 - gy * 0.8) * 3.0, -1.0, 1.0) * rewrite;
|
|
54
|
+
sand *= 1.0 - groove * 0.28;
|
|
55
|
+
sand += uSand * lit * 0.22;
|
|
56
|
+
|
|
57
|
+
vec3 col = mix(sand, uWet * (0.9 + 0.1 * rip), wetness * 0.85);
|
|
58
|
+
// glossy sheen on wet sand
|
|
59
|
+
col += vec3(1.0) * wetness * 0.06 * smoothstep(0.6, 1.0, vnoise(p * vec2(4.0, 30.0) + t * 0.2));
|
|
60
|
+
|
|
61
|
+
// shells
|
|
62
|
+
if (uShells > 0.5) {
|
|
63
|
+
for (int i = 0; i < 5; i++) {
|
|
64
|
+
float fi = float(i);
|
|
65
|
+
vec2 sp = vec2(hash11(fi * 3.7) * uRes.x / uRes.y, 0.08 + hash11(fi * 9.1) * 0.5);
|
|
66
|
+
vec2 d = p - sp;
|
|
67
|
+
d = mat2(cos(fi), -sin(fi), sin(fi), cos(fi)) * d;
|
|
68
|
+
float r = length(d * vec2(1.0, 1.3));
|
|
69
|
+
float shell = smoothstep(0.016, 0.013, r);
|
|
70
|
+
float ridges = 0.85 + 0.15 * sin(atan(d.y, d.x) * 14.0);
|
|
71
|
+
col = mix(col, vec3(1.0, 0.93, 0.86) * ridges * (0.9 + 0.2 * (d.y / 0.016)), shell);
|
|
72
|
+
col *= 1.0 - smoothstep(0.022, 0.012, length(d - vec2(0.004, -0.004))) * 0.15 * (1.0 - shell);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// water above the edge: shallow turquoise turning deep, caustics and sparkle
|
|
77
|
+
float inWater = smoothstep(edge - 0.004, edge + 0.004, uv.y);
|
|
78
|
+
float depth = clamp((uv.y - edge) / 0.35, 0.0, 1.0);
|
|
79
|
+
vec3 water = mix(uShallow, uDeep, smoothstep(0.0, 1.0, depth + (uv.y - SHORE) * 1.4));
|
|
80
|
+
float caus = pow(abs(sin(fbm(p * 9.0 + t * 0.35) * 12.0)), 6.0);
|
|
81
|
+
water += vec3(1.0) * caus * 0.12 * (1.0 - depth);
|
|
82
|
+
vec3 under = col * mix(vec3(0.9, 0.97, 1.0), uShallow, 0.35);
|
|
83
|
+
water = mix(under, water, smoothstep(0.0, 0.25, depth));
|
|
84
|
+
float sparkle = step(0.997, hash12(floor(fc * 0.5) + floor(t * 6.0))) * depth;
|
|
85
|
+
water += sparkle * 0.8;
|
|
86
|
+
col = mix(col, water, inWater);
|
|
87
|
+
// foam line and lace
|
|
88
|
+
float fl = exp(-abs(uv.y - edge) * 140.0);
|
|
89
|
+
float lace = smoothstep(0.55, 0.75, fbm(p * vec2(14.0, 40.0) + vec2(t * 0.1, 0.0))) * smoothstep(0.08, 0.0, uv.y - edge) * step(edge, uv.y);
|
|
90
|
+
col = mix(col, uFoam, clamp(fl * 0.9 + lace * 0.7, 0.0, 1.0));
|
|
91
|
+
|
|
92
|
+
col = toSRGB(aces(col * 1.05));
|
|
93
|
+
fragColor = vec4(col, 1.0);
|
|
94
|
+
}
|
|
95
|
+
`,R={id:"beach",name:"Written in Sand",description:"The code is written in the sand of a quiet beach. Waves wash it away, and it's redrawn as the sand dries.",category:"Nature",kind:"2d",motion:"live",tags:["webgl","beach","ocean","summer","calm","light","nature"],layout:"bottom",codeInScene:!0,stillTime:.9,copy:{eyebrow:"Washed away",title:"The tide took this page.",message:"It was written here a moment ago. Walk back up the beach to where things stay put.",actions:[{label:"Back to dry land",href:"/",variant:"primary"}]},params:{sand:"#e8d2a8",wet:"#b89c72",shallow:"#7fe3d6",deep:"#1f8fb3",foam:"#ffffff",cycle:12,reach:.34,shells:!0},theme:{bg:"#e8d2a8",fg:"#3a2a15",accent:"#3a2a15","accent-fg":"#f6ead2"},presetName:"Tropical",presets:{night:{name:"Moonlit Beach",params:{sand:"#8a8aa0",wet:"#5a5a74",shallow:"#3a6a8a",deep:"#0b1a3a",foam:"#dfe8ff",shells:!1},theme:{bg:"#6b6b88",fg:"#f2f2ff",accent:"#f2f2ff","accent-fg":"#1a1a2e"}},lagoon:{name:"Lagoon",params:{sand:"#fff2d9",wet:"#e6cfa8",shallow:"#9ff2e6",deep:"#00a3c9",foam:"#ffffff"},theme:{bg:"#fff2d9",fg:"#2a1a05",accent:"#00728f","accent-fg":"#fff"}},black:{name:"Black Sand",params:{sand:"#3a3936",wet:"#1f1e1c",shallow:"#6fa3b5",deep:"#1d3a4f",foam:"#e9f2f5"},theme:{bg:"#2c2b29",fg:"#f2efe8",accent:"#f2efe8","accent-fg":"#1f1e1c"}},sunset:{name:"Golden Hour",params:{sand:"#f2c38f",wet:"#c58c5c",shallow:"#ffb38a",deep:"#7a4a8c",foam:"#fff2e2"},theme:{bg:"#f2c38f",fg:"#3b1d0e",accent:"#3b1d0e","accent-fg":"#ffeedd"}},pink:{name:"Pink Sand",params:{sand:"#f4d6d0",wet:"#d6aaa2",shallow:"#a6eee6",deep:"#3bb4c9",foam:"#ffffff"},theme:{bg:"#f4d6d0",fg:"#4a2420",accent:"#4a2420","accent-fg":"#fff"}},nordic:{name:"Nordic",params:{sand:"#d9d6cf",wet:"#a9a59c",shallow:"#9fbcc4",deep:"#4a6670",foam:"#f4f7f8",shells:!1},theme:{bg:"#d9d6cf",fg:"#1f2a2e",accent:"#1f2a2e","accent-fg":"#fff"}}},css:"& .lp-body{background:radial-gradient(closest-side,color-mix(in srgb,var(--lp-bg) 70%,transparent),transparent);padding:20px 50px}",setup(t){let a=t.params,l=document.createElement("canvas"),c=null,e,n=()=>{let o=Math.min(2048,Math.round(t.width*Math.min(2,t.dpr))),r=Math.round(o*t.height/Math.max(1,t.width));l.width=o,l.height=r;let s=l.getContext("2d");s.clearRect(0,0,o,r),s.save(),s.translate(0,r*.45-r*.18),s.rotate(-.03),d(s,t.copy.code||"404",{width:o,height:r*.36,font:'"Marker Felt","Chalkboard SE","Comic Sans MS","Segoe Print",cursive',weight:700,fit:.7}),s.restore(),c&&(e.bindTexture(e.TEXTURE_2D,c),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,l),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,!1),e.generateMipmap(e.TEXTURE_2D))};return{...p(t,{frag:g,init(o){e=o,n(),c=m(e,l,{filter:"mipmap"})},uniforms:()=>({uText:c,uSand:f(a.sand),uWet:f(a.wet),uShallow:f(a.shallow),uDeep:f(a.deep),uFoam:f(a.foam),uCycle:a.cycle,uReach:a.reach,uShells:a.shells?1:0})}),resize:n}}};export{R as default};
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import{a as h}from"./chunk-LMRCHEWX.js";import{a as p,b as m,c as u,h as d}from"./chunk-QJZBGT2Q.js";import{e as o}from"./chunk-HXSSPN2I.js";import{a as i}from"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var b=`
|
|
2
|
+
uniform sampler2D uText;
|
|
3
|
+
uniform vec3 uHot, uWarm, uCool, uTextCol, uNebula;
|
|
4
|
+
uniform float uDiskB, uTilt, uSpin, uDoppler, uStars, uExposure, uTextAspect;
|
|
5
|
+
${p}
|
|
6
|
+
${m}
|
|
7
|
+
${u}
|
|
8
|
+
|
|
9
|
+
const float RS = 1.0; // Schwarzschild radius
|
|
10
|
+
const float DISK_IN = 2.6;
|
|
11
|
+
const float DISK_OUT = 9.0;
|
|
12
|
+
|
|
13
|
+
vec3 starfield(vec3 d) {
|
|
14
|
+
vec3 col = vec3(0.0);
|
|
15
|
+
for (int l = 0; l < 3; l++) {
|
|
16
|
+
float sc = 140.0 + float(l) * 160.0;
|
|
17
|
+
vec3 p = d * sc;
|
|
18
|
+
vec3 id = floor(p);
|
|
19
|
+
float h = hash13(id + float(l) * 31.0);
|
|
20
|
+
if (h > 0.985) {
|
|
21
|
+
vec3 c = id + 0.5 + (vec3(hash13(id + 1.0), hash13(id + 2.0), hash13(id + 3.0)) - 0.5) * 0.6;
|
|
22
|
+
float dd = length(p - c);
|
|
23
|
+
vec3 tint = mix(vec3(0.7, 0.8, 1.0), vec3(1.0, 0.85, 0.7), hash13(id + 9.0));
|
|
24
|
+
col += tint * smoothstep(0.3, 0.0, dd) * (h - 0.985) * 45.0 / (1.0 + float(l));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
float n = fbm3(d * 2.2 + 5.0);
|
|
28
|
+
col += uNebula * pow(max(n - 0.35, 0.0), 2.0) * 1.6;
|
|
29
|
+
return col * uStars;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
vec4 diskSample(vec3 p, vec3 rd) {
|
|
33
|
+
float r = length(p.xz);
|
|
34
|
+
if (r < DISK_IN || r > DISK_OUT) return vec4(0.0);
|
|
35
|
+
float ang = atan(p.z, p.x);
|
|
36
|
+
float omega = uSpin * 2.2 / pow(r, 1.5);
|
|
37
|
+
float a = ang + uTime * omega;
|
|
38
|
+
vec2 q = vec2(r * 1.7, a * 3.0);
|
|
39
|
+
float n = fbm(vec2(q.x, sin(a) * 3.0 + cos(a) * 1.5) + vec2(0.0, uTime * 0.05)) * 0.7 + 0.3 * vnoise(vec2(r * 9.0, a * 12.0));
|
|
40
|
+
float ring = smoothstep(DISK_IN, DISK_IN + 0.4, r) * smoothstep(DISK_OUT, DISK_OUT * 0.55, r);
|
|
41
|
+
float dens = ring * (0.35 + 0.95 * n);
|
|
42
|
+
// temperature falls with radius
|
|
43
|
+
float tcur = clamp((r - DISK_IN) / (DISK_OUT - DISK_IN), 0.0, 1.0);
|
|
44
|
+
vec3 c = mix(uHot, uWarm, smoothstep(0.0, 0.45, tcur));
|
|
45
|
+
c = mix(c, uCool, smoothstep(0.4, 1.0, tcur));
|
|
46
|
+
// relativistic beaming: the side moving toward us is brighter and bluer
|
|
47
|
+
vec3 vel = normalize(vec3(-p.z, 0.0, p.x)) * sqrt(0.5 / r);
|
|
48
|
+
float g = 1.0 / max(1.0 - dot(vel, -rd) * uDoppler * 1.6, 0.15);
|
|
49
|
+
c *= pow(g, 3.0);
|
|
50
|
+
c = mix(c, c * vec3(0.8, 0.95, 1.25), clamp(g - 1.0, 0.0, 1.0) * 0.6);
|
|
51
|
+
float inten = uDiskB * 4.0 / (r * 0.6);
|
|
52
|
+
return vec4(c * inten * dens, clamp(dens * 0.9, 0.0, 1.0));
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
void main() {
|
|
56
|
+
vec2 fc = gl_FragCoord.xy;
|
|
57
|
+
vec2 uv = (fc - 0.5 * uRes) / uRes.y;
|
|
58
|
+
float t = uTime;
|
|
59
|
+
float aspect = uRes.x / uRes.y;
|
|
60
|
+
|
|
61
|
+
// camera orbiting slightly above the disk plane
|
|
62
|
+
float dist = 46.0 / clamp(aspect, 0.6, 1.8);
|
|
63
|
+
float yaw = 0.25 * sin(t * 0.05) + uMouse.x * 0.35;
|
|
64
|
+
float pitch = uTilt + uMouse.y * 0.12;
|
|
65
|
+
vec3 ro = dist * vec3(sin(yaw) * cos(pitch), sin(pitch), cos(yaw) * cos(pitch));
|
|
66
|
+
vec3 fw = normalize(-ro);
|
|
67
|
+
vec3 rt = normalize(cross(fw, vec3(0.0, 1.0, 0.0)));
|
|
68
|
+
vec3 up = cross(rt, fw);
|
|
69
|
+
vec3 rd = normalize(fw * 2.0 + rt * uv.x + up * (uv.y - 0.1));
|
|
70
|
+
|
|
71
|
+
// text plane through the origin, facing the camera
|
|
72
|
+
vec3 pn = -fw;
|
|
73
|
+
|
|
74
|
+
vec3 pos = ro;
|
|
75
|
+
vec3 vel = rd;
|
|
76
|
+
vec3 col = vec3(0.0);
|
|
77
|
+
float trans = 1.0;
|
|
78
|
+
float h2 = dot(cross(pos, vel), cross(pos, vel));
|
|
79
|
+
bool captured = false;
|
|
80
|
+
for (int i = 0; i < 220; i++) {
|
|
81
|
+
float r = length(pos);
|
|
82
|
+
float dt = clamp(0.08 * r, 0.03, 1.6);
|
|
83
|
+
vec3 acc = -1.5 * h2 * pos / pow(max(r, 1e-3), 5.0);
|
|
84
|
+
vec3 prev = pos;
|
|
85
|
+
vel += acc * dt;
|
|
86
|
+
pos += vel * dt;
|
|
87
|
+
float nr = length(pos);
|
|
88
|
+
if (nr < RS) { captured = true; break; }
|
|
89
|
+
// disk crossing
|
|
90
|
+
if (prev.y * pos.y < 0.0) {
|
|
91
|
+
vec3 hit = mix(prev, pos, prev.y / (prev.y - pos.y));
|
|
92
|
+
vec4 d = diskSample(hit, normalize(vel));
|
|
93
|
+
col += trans * d.rgb * d.a;
|
|
94
|
+
trans *= 1.0 - d.a;
|
|
95
|
+
}
|
|
96
|
+
// text plane crossing
|
|
97
|
+
float s0 = dot(prev, pn), s1 = dot(pos, pn);
|
|
98
|
+
if (s0 * s1 < 0.0) {
|
|
99
|
+
vec3 hit = mix(prev, pos, s0 / (s0 - s1));
|
|
100
|
+
vec2 tp = vec2(dot(hit, rt), dot(hit, up));
|
|
101
|
+
vec2 tuv = vec2(tp.x / 17.0 + 0.5, tp.y / (17.0 / uTextAspect) + 0.5);
|
|
102
|
+
if (tuv.x > 0.0 && tuv.x < 1.0 && tuv.y > 0.0 && tuv.y < 1.0) {
|
|
103
|
+
float a = textureLod(uText, tuv, 0.6).a;
|
|
104
|
+
col += trans * uTextCol * a * 0.9;
|
|
105
|
+
trans *= 1.0 - a * 0.92;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
if (trans < 0.01) break;
|
|
109
|
+
if (nr > dist * 1.6 && dot(pos, vel) > 0.0) break;
|
|
110
|
+
}
|
|
111
|
+
if (!captured) col += trans * starfield(normalize(vel));
|
|
112
|
+
// faint photon ring glow
|
|
113
|
+
float b = length(cross(ro, rd));
|
|
114
|
+
col += uHot * 0.06 * exp(-abs(b - 2.6) * 6.0) * uDiskB;
|
|
115
|
+
|
|
116
|
+
col *= uExposure;
|
|
117
|
+
col = aces(col);
|
|
118
|
+
col = toSRGB(col);
|
|
119
|
+
col *= mix(0.75, 1.0, vignette(vUv, 0.25));
|
|
120
|
+
col += grain(fc, t) * 0.015;
|
|
121
|
+
fragColor = vec4(col, 1.0);
|
|
122
|
+
}
|
|
123
|
+
`,k={id:"black-hole",name:"Event Horizon",description:"The zero is a black hole. Light from its accretion disk and from the numerals around it bends in real time.",category:"Space",kind:"3d",motion:"live",tags:["webgl","space","black-hole","lensing","physics","cinematic","dark"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Singularity",title:"You crossed the event horizon.",message:"Nothing escapes a 404, not even this page. Light still finds its way home, and so can you.",actions:[{label:"Escape to home",href:"/",variant:"primary"},{label:"Report a lost page",href:"/contact",variant:"secondary"}]},params:{hot:"#fff3d6",warm:"#ffae4d",cool:"#c2402a",textColor:"#f4efe6",diskBrightness:1,diskTilt:.09,spin:1,doppler:1,stars:1,nebula:"#2a3a6b",exposure:1},theme:{bg:"#000000",accent:"#fff3df","accent-fg":"#140b02"},presetName:"Gargantua",presets:{emerald:{name:"Emerald Disk",params:{hot:"#e9fff3",warm:"#3bff9a",cool:"#0a6b4a",nebula:"#0a2a2a",textColor:"#e9fff3"},theme:{accent:"#9dffcf","accent-fg":"#02140b"}},violet:{name:"Violet",params:{hot:"#fbeaff",warm:"#b45cff",cool:"#3a0f7a",nebula:"#1a0b3a"},theme:{accent:"#e2c2ff","accent-fg":"#12052a"}},faint:{name:"Quiet Giant",eyebrow:"Dormant",title:"Even quiet black holes eat pages.",params:{diskBrightness:.45,hot:"#fff1d6",warm:"#d98a4a",cool:"#5a2a1a",stars:1.3,exposure:1.2}},ice:{name:"Ice Halo",params:{hot:"#ffffff",warm:"#9fd8ff",cool:"#2a4a8a",nebula:"#0a1a3a",doppler:1.4,textColor:"#dff2ff"},theme:{accent:"#dff2ff","accent-fg":"#04102a"}},quasar:{name:"Quasar",eyebrow:"Active nucleus",title:"Brightest thing in the universe. Still no page.",params:{hot:"#f2f7ff",warm:"#7fb2ff",cool:"#3b3fc4",nebula:"#40216b",diskBrightness:1.3},theme:{accent:"#e6f0ff","accent-fg":"#050b1f"}},crimson:{name:"Crimson",params:{hot:"#ffd8c2",warm:"#ff4f3a",cool:"#5a0b1a",nebula:"#3a0f1e",exposure:1.1},theme:{accent:"#ffcabb","accent-fg":"#1f0505"}},eclipse:{name:"Eclipse",eyebrow:"Total eclipse",title:"Lights out on this page.",params:{hot:"#ffffff",warm:"#d9d9d9",cool:"#4d4d4d",nebula:"#111111",textColor:"#ffffff",doppler:.6,stars:.6},theme:{accent:"#ffffff","accent-fg":"#000"}},edgeon:{name:"Edge-on",params:{diskTilt:.025,hot:"#fff6e0",warm:"#ffc06b",cool:"#b8562c"}},synth:{name:"Synthwave",params:{hot:"#ffe6ff",warm:"#ff4fd8",cool:"#3c1dff",nebula:"#1d0b3a",textColor:"#9ff3ff"},theme:{accent:"#ff4fd8","accent-fg":"#12001a"}}},css:`& .lp-title{font-weight:500}
|
|
124
|
+
& .lp-body{padding-bottom:clamp(8px,2cqh,24px)}`,setup(l){let e=l.params,f=l.copy.code||"404",r=1700,t=560,s=document.createElement("canvas");s.width=r,s.height=t;let a=s.getContext("2d");a.fillStyle="#fff",a.textAlign="center",a.textBaseline="middle";let c=[...f],v=c.length===3&&/[0oO]/.test(c[1]);a.font=`600 ${t*.86}px ${i}`,v?(a.fillText(c[0],r*.19,t*.53),a.fillText(c[2],r*.81,t*.53)):(a.font=`600 ${t*.5}px ${i}`,a.fillText(f,r/2,t*.12+t*.2));let n;return h(l,{frag:b,init(g){n=d(g,s,{filter:"mipmap"})},uniforms:()=>({uText:n,uTextAspect:r/t,uHot:o(e.hot),uWarm:o(e.warm),uCool:o(e.cool),uTextCol:o(e.textColor),uNebula:o(e.nebula),uDiskB:e.diskBrightness,uTilt:e.diskTilt,uSpin:e.spin,uDoppler:e.doppler,uStars:e.stars,uExposure:e.exposure})})}};export{k as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as R,c as A}from"./chunk-JLRXT2AZ.js";import{a as I}from"./chunk-4ZBXB36L.js";import{f as w}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var N=[[[0,0],[1,0],[2,0],[3,0]],[[0,0],[1,0],[0,1],[1,1]],[[0,0],[1,0],[2,0],[1,1]],[[0,0],[0,1],[1,1],[2,1]],[[2,0],[0,1],[1,1],[2,1]],[[1,0],[2,0],[0,1],[1,1]],[[0,0],[1,0],[1,1],[2,1]]],B={id:"block-drop",name:"Block Drop",description:"Falling blocks stack themselves into the shape of the error, row by row, then clear with a flash and start again.",category:"Games",kind:"2d",motion:"live",tags:["canvas","blocks","puzzle","retro","satisfying","arcade","colorful"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Line clear",title:"Every piece fit, except this page.",message:"We stacked it perfectly and it still cleared itself away. Try the homepage.",actions:[{label:"New game at home",href:"/",variant:"primary"}]},params:{bg:"#0b0b1a",well:"#14142a",colors:["#3bd6ff","#ffd23f","#b45cff","#3dff8a","#ff4d4d","#ff9f1c","#4f7dff"],rate:26},theme:{bg:"#0b0b1a",fg:"#eef0ff",accent:"#3bd6ff","accent-fg":"#0b0b1a","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Arcade",presets:{pocket:{name:"Pocket",params:{bg:"#9bbc0f",well:"#8bac0f",colors:["#0f380f","#306230"]},theme:{bg:"#9bbc0f",fg:"#0f380f",accent:"#0f380f","accent-fg":"#9bbc0f"}},pastel:{name:"Pastel",params:{bg:"#fff8f2",well:"#f4ebe2",colors:["#ffb3c7","#a8d8ff","#ffe08a","#b8f0c8","#d6c2ff"]},theme:{bg:"#fff8f2",fg:"#2a1a33",accent:"#2a1a33","accent-fg":"#fff"}},mono:{name:"Monochrome",params:{bg:"#000000",well:"#0d0d0d",colors:["#ffffff","#bbbbbb","#888888"]},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}}},setup(p){let b=p.params,r=I(p),x=p.random,t=0,n=0,f=0,h=0,g=0,v=[],s=[],d=[],m=[],y=0,c=-1,P=()=>{t=34,n=14,f=Math.floor(Math.min(r.w*.8/t,r.h*.6/n)),h=Math.floor((r.w-t*f)/2),g=Math.floor(r.h*.05),v=R(p.copy.code||"404",t,n,900),s=[];for(let o=n-1;o>=0;o--)for(let i=0;i<t;i++)v[o*t+i]&&s.push(o*t+i);E()},E=()=>{if(d=new Array(t*n).fill(null),m=[],y=0,c=-1,p.reducedMotion)for(let o of s)d[o]=b.colors[o%b.colors.length]};P();let M=0;return{resize(){r.reset(),P()},frame(o,i){let l=r.g;if(r.reset(),i>0){for(M+=i*b.rate;M>1&&y<s.length;){M-=1;let e=Math.floor(x()*N.length);m.push({i:s[y++],y:-2-x()*3,col:b.colors[e%b.colors.length],shape:e})}for(let e of m){let a=Math.floor(e.i/t);e.y+=i*22,e.y>=a&&(d[e.i]=e.col,e.y=1/0)}m=m.filter(e=>e.y!==1/0),y>=s.length&&!m.length&&(c<0&&(c=o),o-c>2.4&&E())}l.fillStyle=b.bg,l.fillRect(0,0,r.w,r.h),l.fillStyle=b.well,l.fillRect(h-6,g-6,t*f+12,n*f+12);let k=(e,a,S,u=1)=>{l.fillStyle=w(S,u),l.fillRect(h+e*f+1,g+a*f+1,f-2,f-2),l.fillStyle=w("#ffffff",.25*u),l.fillRect(h+e*f+1,g+a*f+1,f-2,Math.max(2,f*.15)),l.fillStyle=w("#000000",.2*u),l.fillRect(h+e*f+1,g+a*f+f-1-Math.max(2,f*.15),f-2,Math.max(2,f*.15))};for(let e of s)d[e]||k(e%t,Math.floor(e/t),"#ffffff",.04);let T=c>0&&o-c>1.2?.5+.5*Math.sin((o-c)*30):1;d.forEach((e,a)=>e&&k(a%t,Math.floor(a/t),c>0&&o-c>1.2?"#ffffff":e,T));for(let e of m){let a=e.i%t;for(let[S,u]of N[e.shape].slice(0,1))k(a+S,e.y+u,e.col)}l.font=`700 ${Math.max(10,f*.5)}px ${A}`,l.fillStyle=w("#ffffff",.6),l.textAlign="left",l.fillText(`LINES ${Math.floor(y/Math.max(1,s.length)*n)}`,h,g+n*f+22)}}}};export{B as default};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var a=r=>r.replace(/[&<>"]/g,i=>({"&":"&","<":"<",">":">",'"':"""})[i]);function h(r){let t=r,c=()=>(t=t*1103515245+12345&2147483647)/2147483647,f="",p=(e,s)=>{let d=e<7&&s<7?[e,s]:e>=18&&s<7?[e-18,s]:e<7&&s>=18?[e,s-18]:null;if(!d)return null;let[n,o]=d;return Math.max(Math.abs(n-3),Math.abs(o-3))!==2};for(let e=0;e<25;e++)for(let s=0;s<25;s++){let d=p(s,e);(d===null?c()>.52:d)&&(f+=`<rect x="${s}" y="${e}" width="1" height="1"/>`)}return`<svg viewBox="-1 -1 27 27" aria-hidden="true"><rect x="-1" y="-1" width="27" height="27" fill="#fff"/><g fill="currentColor">${f}</g></svg>`}var u={id:"blue-screen",name:"Fatal Error",description:"Blue screens, kernel panics, restart prompts and guru meditations, each a classic crash screen rewritten as a 404.",category:"Retro Tech",kind:"2d",motion:"live",tags:["dom","bsod","crash","retro","developer","funny","keyboard"],layout:"none",copy:{title:"Your browser ran into a problem.",message:"The page you asked for doesn't exist. We're collecting some error info, then we'll take you home.",actions:[{label:"Restart at home",href:"/",variant:"primary"}]},params:{style:"modern"},theme:{bg:"#1259b8",fg:"#ffffff"},presetName:"Modern",presets:{green:{name:"Preview Build",params:{style:"modern"},theme:{bg:"#0e7a0d",fg:"#ffffff"}},black:{name:"Black Screen",params:{style:"modern"},theme:{bg:"#000000",fg:"#ffffff"}},classic:{name:"Classic",params:{style:"classic"},theme:{bg:"#0000aa",fg:"#ffffff"}},kernel:{name:"Kernel Panic",params:{style:"kernel"},theme:{bg:"#000000",fg:"#c7c7c7"}},restart:{name:"Restart Required",params:{style:"restart"},theme:{bg:"#1d1d1f",fg:"#f5f5f7"}},guru:{name:"Guru Meditation",params:{style:"guru"},theme:{bg:"#000000",fg:"#ff2a1a"}},bios:{name:"Boot Failure",params:{style:"bios"},theme:{bg:"#000000",fg:"#bdbdbd"}}},css:`
|
|
2
|
+
& .bs{position:absolute;inset:0;overflow:hidden;color:var(--lp-fg)}
|
|
3
|
+
& .bs a{color:inherit}
|
|
4
|
+
& .bs-modern{display:flex;align-items:center;padding:clamp(24px,9cqw,140px)}
|
|
5
|
+
& .bs-modern .in{max-width:900px}
|
|
6
|
+
& .bs-modern .face{font-size:clamp(90px,13cqw,170px);line-height:1;margin:0 0 .25em;font-weight:300}
|
|
7
|
+
& .bs-modern h1{font-size:clamp(20px,2.3cqw,30px);font-weight:300;line-height:1.35;margin:0 0 1em;max-width:30ch}
|
|
8
|
+
& .bs-modern .pct{font-size:clamp(20px,2.3cqw,30px);font-weight:300;margin:0 0 1.4em}
|
|
9
|
+
& .bs-modern .row{display:flex;gap:22px;align-items:flex-start}
|
|
10
|
+
& .bs-modern .qr{width:clamp(78px,8cqw,110px);flex:none;color:var(--lp-bg)}
|
|
11
|
+
& .bs-modern .meta{font-size:clamp(12px,1cqw,14px);line-height:1.6}
|
|
12
|
+
& .bs-modern .meta p{margin:0 0 .6em}
|
|
13
|
+
& .bs-modern .home{display:inline-block;margin-top:.4em;padding:8px 16px;border:1px solid rgba(255,255,255,.7);text-decoration:none}
|
|
14
|
+
& .bs-modern .home:hover{background:#fff;color:var(--lp-bg)}
|
|
15
|
+
& .bs-classic,& .bs-guru,& .bs-bios,& .bs-kernel{font-family:"Perfect DOS VGA 437","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
|
|
16
|
+
& .bs-classic{display:flex;align-items:center;justify-content:center;padding:24px;font-size:clamp(13px,1.35cqw,18px);line-height:1.45}
|
|
17
|
+
& .bs-classic .in{max-width:68ch}
|
|
18
|
+
& .bs-classic .tag{display:table;margin:0 auto 1.4em;background:#aaaaaa;color:#0000aa;padding:0 .6em;font-weight:700}
|
|
19
|
+
& .bs-classic h1{font:inherit;margin:0 0 1.2em}
|
|
20
|
+
& .bs-classic p{margin:0 0 1.2em}
|
|
21
|
+
& .bs-classic .cont{text-align:center}
|
|
22
|
+
& .cur{display:inline-block;width:.6em;animation:bs-b 1s steps(1) infinite}
|
|
23
|
+
@keyframes bs-b{50%{opacity:0}}
|
|
24
|
+
& .bs-kernel{padding:clamp(10px,2cqw,24px);font-size:clamp(11px,1cqw,13.5px);line-height:1.4;white-space:pre-wrap}
|
|
25
|
+
& .bs-kernel .log{margin:0;font:inherit}
|
|
26
|
+
& .bs-kernel h1{font:inherit;margin:0;color:#fff}
|
|
27
|
+
& .bs-kernel a{color:#7fdbff}
|
|
28
|
+
& .bs-restart{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#2c2c2e,#121214)}
|
|
29
|
+
& .bs-restart .in{text-align:center;max-width:620px;padding:24px;animation:bs-fade 1.6s ease both}
|
|
30
|
+
@keyframes bs-fade{from{opacity:0}}
|
|
31
|
+
& .bs-restart svg{width:64px;height:64px;margin-bottom:28px;opacity:.9}
|
|
32
|
+
& .bs-restart h1{font-size:clamp(18px,1.8cqw,22px);font-weight:500;margin:0 0 .5em}
|
|
33
|
+
& .bs-restart p{margin:.25em 0;color:rgba(245,245,247,.62);font-size:14px}
|
|
34
|
+
& .bs-restart .langs{margin-top:22px}
|
|
35
|
+
& .bs-restart .home{display:inline-block;margin-top:26px;padding:9px 20px;border-radius:999px;background:#f5f5f7;color:#1d1d1f;text-decoration:none;font-weight:500;font-size:14px}
|
|
36
|
+
& .bs-guru{display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(20px,6cqh,60px)}
|
|
37
|
+
& .bs-guru .box{border:clamp(4px,.5cqw,7px) solid currentColor;padding:1.1em 2em;text-align:center;font-size:clamp(12px,1.5cqw,20px);line-height:1.6;animation:bs-g 1.6s steps(1) infinite;max-width:94cqw}
|
|
38
|
+
@keyframes bs-g{50%{border-color:transparent}}
|
|
39
|
+
& .bs-guru h1{font:inherit;margin:0}
|
|
40
|
+
& .bs-guru .sub{color:rgba(255,255,255,.5);margin-top:3em;font-size:clamp(11px,1cqw,14px);text-align:center}
|
|
41
|
+
& .bs-bios{padding:clamp(16px,3cqw,40px);font-size:clamp(12px,1.25cqw,17px);line-height:1.55}
|
|
42
|
+
& .bs-bios .logo{float:right;text-align:right;color:#5af;opacity:.9;line-height:1.1}
|
|
43
|
+
& .bs-bios h1{font:inherit;color:#fff;margin:1.4em 0 0}
|
|
44
|
+
& .bs-bios .w{color:#fff}
|
|
45
|
+
& .bs-bios .ok{color:#5f5}
|
|
46
|
+
@media (prefers-reduced-motion:reduce){& .cur,& .bs-guru .box,& .bs-restart .in{animation:none}}
|
|
47
|
+
`,setup(r){let{style:i}=r.params,t=r.copy,c=t.actions[0]?.href??"/",f=t.actions[0]?.label??"Go home",p=typeof location<"u"?location.pathname:"/missing",e=document.createElement("div");e.className=`bs bs-${i}`;let s=()=>{};if(i==="modern"){e.innerHTML=`<div class="in"><div class="face" aria-hidden="true">:(</div>
|
|
48
|
+
<h1><span class="lp-sr">Error ${a(t.code)}: </span>${a(t.title)} ${a(t.message)}</h1>
|
|
49
|
+
<p class="pct"><span class="n">0</span>% complete</p>
|
|
50
|
+
<div class="row"><div class="qr">${h(404)}</div><div class="meta">
|
|
51
|
+
<p>For more information about this issue and possible fixes, visit the homepage.</p>
|
|
52
|
+
<p>If you call a support person, give them this info:<br>Stop code: PAGE_NOT_FOUND (${a(t.code)})<br>What failed: ${a(p)}</p>
|
|
53
|
+
<a class="home" href="${a(c)}">${a(f)}</a></div></div></div>`;let n=e.querySelector(".n");s=o=>{let l=Math.min(100,Math.floor(o*7%140));n.textContent=l>=100?t.code:String(l)}}else if(i==="classic")e.innerHTML=`<div class="in"><div class="tag"> Error ${a(t.code)} </div>
|
|
54
|
+
<h1>A fatal exception ${a(t.code)} has occurred at 0028:C0011E36 in VXD PAGE(01) + 00010E36. <span class="lp-sr">${a(t.title)}</span>The current page will be terminated.</h1>
|
|
55
|
+
<p>* Press any key to return to the homepage.<br>* Press CTRL+ALT+DEL to lose any unsaved links in all pages. That would be a shame.</p>
|
|
56
|
+
<p class="cont">Press any key to continue <span class="cur">_</span></p></div>`;else if(i==="kernel"){let n=["[ 0.000000] Linux version 4.0.4-lost (page@nowhere) #404 SMP","[ 0.000404] Command line: BOOT_IMAGE=/vmlinuz root="+p+" ro quiet splash",'[ 1.204040] VFS: Cannot open root device "'+p+'" or unknown-block(404,0): error -2','[ 1.204041] Please append a correct "root=" boot option; here are the available partitions:',"[ 1.204044] 0800 home / (driver?)","[ 1.204045] 0801 blog /blog (driver?)","[ 1.204046] 0802 about /about (driver?)"];e.innerHTML='<pre class="log"></pre>';let o=e.querySelector(".log"),l=0;s=g=>{let b=Math.min(n.length+4,Math.floor(g*4));for(;l<b;){if(l<n.length)o.append(n[l]+`
|
|
57
|
+
`);else if(l===n.length){let m=document.createElement("h1");m.innerHTML=`[ 1.204047] Kernel panic - not syncing: VFS: Unable to mount ${a(t.title.toLowerCase())} on unknown-block(${a(t.code)},0)`,o.append(m)}else if(l===n.length+1)o.append(`[ 1.204048] ---[ end Kernel panic - not syncing ]---
|
|
58
|
+
|
|
59
|
+
`);else if(l===n.length+2){let m=document.createElement("a");m.href=c,m.textContent=`> reboot into ${c}`,o.append(m,`
|
|
60
|
+
`)}l++}}}else i==="restart"?e.innerHTML=`<div class="in"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true"><path d="M32 8v22"/><path d="M19 15a22 22 0 1 0 26 0"/></svg>
|
|
61
|
+
<h1><span class="lp-sr">Error ${a(t.code)}: </span>You need to go back to the homepage.</h1>
|
|
62
|
+
<p>${a(t.message)}</p>
|
|
63
|
+
<div class="langs"><p>Vous devez retourner \xE0 la page d'accueil.</p><p>Sie m\xFCssen zur Startseite zur\xFCckkehren.</p><p>\u30DB\u30FC\u30E0\u30DA\u30FC\u30B8\u306B\u623B\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002</p></div>
|
|
64
|
+
<a class="home" href="${a(c)}">${a(f)}</a></div>`:i==="guru"?e.innerHTML=`<div><div class="box"><h1>Software Failure. Press left mouse button to continue.<span class="lp-sr"> ${a(t.title)}</span></h1>Guru Meditation #0000${a(t.code.padStart(4,"0"))}.00C0FFEE</div>
|
|
65
|
+
<div class="sub">${a(t.message)}</div></div>`:e.innerHTML=`<div class="logo" aria-hidden="true">LOSTPAGE BIOS<br>v4.04</div>
|
|
66
|
+
<div>Lostpage Modular BIOS v4.04, An Energy Star Ally<br>Copyright (C) 1984-2026, Nowhere Software, Inc.</div><br>
|
|
67
|
+
<div>Main Processor : Pentium-ish 404MHz<br>Memory Testing : <span class="ok">65536K OK</span></div><br>
|
|
68
|
+
<div>Detecting Primary Master ... <span class="w">HOMEPAGE</span><br>Detecting Primary Slave ... <span class="w">${a(p)}</span> <span style="color:#f55">None</span></div>
|
|
69
|
+
<h1>Error ${a(t.code)}: Boot page not found.<span class="lp-sr"> ${a(t.title)}</span></h1>
|
|
70
|
+
<div>${a(t.message)}</div><br><div class="w">Press any key to boot from HOMEPAGE <span class="cur">_</span></div>`;return r.root.append(e),(i==="classic"||i==="bios"||i==="guru")&&(r.onWindow("keydown",n=>{!r.visible()||n.metaKey||n.ctrlKey||n.altKey||n.key==="Tab"||n.key==="Shift"||r.navigate(c)}),r.on("click",n=>{n.target.closest("a")||r.navigate(c,n)}),e.style.cursor="pointer"),e.querySelectorAll("a").forEach(n=>n.addEventListener("click",o=>{o.metaKey||o.ctrlKey||(o.preventDefault(),r.navigate(n.getAttribute("href")??"/",o))})),{frame(n){s(r.reducedMotion?99:n)},destroy(){e.remove()}}}};export{u as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as O,b as G,d as p,e as H,f as I,g as L}from"./chunk-JLRXT2AZ.js";import{a as A}from"./chunk-4ZBXB36L.js";import{f as B}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var z={id:"breakout",name:"Brick Breaker",description:"The 404 is a wall of bricks. It plays itself until you move the paddle, then it's your game.",category:"Games",kind:"2d",motion:"game",tags:["canvas","game","playable","arcade","retro","interactive"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Insert coin",title:"Break the 404 to find the page.",message:"Spoiler: it isn't behind the bricks either. Move your mouse or use \u2190 \u2192 to play.",actions:[{label:"Quit to home",href:"/",variant:"primary"}]},params:{bg:"#07070f",bricks:["#ff4d6d","#ff8e3c","#ffd23f","#3bd16f","#3ab0ff","#9b5cff"],paddle:"#f4f4f8",ball:"#ffffff",text:"#f4f4f8",glow:!0},theme:{bg:"#07070f",accent:"#f4f4f8","accent-fg":"#07070f","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Arcade",presets:{candy:{name:"Candy",params:{bg:"#fff4f8",bricks:["#ff5c8a","#ffb13b","#5cd6ff","#9b7bff"],paddle:"#2a1030",ball:"#ff5c8a",text:"#2a1030",glow:!1},theme:{bg:"#fff4f8",fg:"#2a1030",accent:"#2a1030","accent-fg":"#fff"}},ice:{name:"Ice",params:{bg:"#03111c",bricks:["#e6faff","#9fe8ff","#4fc3ff"],paddle:"#e6faff",ball:"#ffffff",text:"#cdefff"},theme:{bg:"#03111c",accent:"#9fe8ff","accent-fg":"#03111c"}},lava:{name:"Lava",params:{bg:"#100300",bricks:["#ff2a00","#ff7a00","#ffd000"],paddle:"#ffd000",ball:"#ffffff",text:"#ffd9b0"},theme:{bg:"#100300",accent:"#ff7a00","accent-fg":"#100300"}},gameboy:{name:"Pocket",params:{bg:"#9bbc0f",bricks:["#0f380f","#306230"],paddle:"#0f380f",ball:"#0f380f",text:"#0f380f",glow:!1},theme:{bg:"#9bbc0f",fg:"#0f380f",accent:"#0f380f","accent-fg":"#9bbc0f"}},paper:{name:"Paper",params:{bg:"#f6f3ec",bricks:["#1c1c1c","#e4572e","#1c1c1c"],paddle:"#1c1c1c",ball:"#e4572e",text:"#1c1c1c",glow:!1},theme:{bg:"#f6f3ec",fg:"#1c1c1c",accent:"#1c1c1c","accent-fg":"#f6f3ec"}},neon:{name:"Neon",params:{bg:"#050010",bricks:["#ff2bd6","#22d3ff"],paddle:"#22d3ff",ball:"#ffffff",text:"#ffe9ff"},theme:{bg:"#050010",accent:"#ff2bd6","accent-fg":"#fff"}},mono:{name:"Amber Terminal",params:{bg:"#0b0700",bricks:["#ffb000","#c98a00"],paddle:"#ffb000",ball:"#ffe3a3",text:"#ffb000"},theme:{bg:"#0b0700",fg:"#ffe3a3",accent:"#ffb000","accent-fg":"#0b0700"}}},css:L,setup(g){let o=g.params,i=A(g),b=O(g,{pointerPlays:!0}),C=g.random,T=g.copy.code||"404",u=[],a={x:0,y:0,w:0,h:0},l={x:0,w:0,y:0},e={x:0,y:0,vx:0,vy:0,r:6,stuck:!0},P=[],m=0,w=3,v=H("breakout"),M=!1,E=!1;function k(){let n=i.w,c=i.h;a={x:Math.max(16,n*.06),y:Math.max(16,c*.05),w:n-2*Math.max(16,n*.06),h:c*.6};let f=Math.max(24,Math.min(54,Math.round(a.w/22))),s=Math.round(f*.36),y=G(T,f,s),t=a.w*.86/f,S=t*.62,d=a.x+a.w*.07,r=a.y+34;u=[];for(let h=0;h<s;h++)for(let x=0;x<f;x++)y[h*f+x]&&u.push({x:d+x*t,y:r+h*S,w:t-2,h:S-2,col:o.bricks[Math.floor(h/s*o.bricks.length)%o.bricks.length],alive:!0});l={x:n/2,w:Math.max(70,Math.min(140,n*.1)),y:a.y+a.h},e.r=Math.max(4,Math.min(7,n/220)),R()}function R(){e.x=l.x,e.y=l.y-14;let n=Math.min(i.h,i.w)*.75,c=-Math.PI/2+(C()-.5)*.9;e.vx=Math.cos(c)*n,e.vy=Math.sin(c)*n,e.stuck=!1}function N(n,c,f){for(let s=0;s<10;s++)P.push({x:n,y:c,vx:(C()-.5)*300,vy:(C()-.5)*300,life:.6,col:f})}return k(),{resize(){i.reset(),k()},frame(n,c){let f=i.g;i.reset(),b.playing&&!E&&(E=!0,m=0,w=3,M=!1,k());let s=l.w/2;if(b.playing)b.left&&(l.x-=900*c),b.right&&(l.x+=900*c),g.pointer.inside&&!(b.left||b.right)&&(l.x+=(g.pointer.x-l.x)*Math.min(1,c*18));else{let t=e.x+Math.sin(n*.7)*s*.6;l.x+=(t-l.x)*Math.min(1,c*9)}if(l.x=Math.max(a.x+s,Math.min(a.x+a.w-s,l.x)),M)b.pressed()&&(M=!1,m=0,w=3,k());else if(c>0){let t=Math.ceil(Math.hypot(e.vx,e.vy)*c/(e.r*.8)),S=c/t;for(let d=0;d<t;d++){if(e.x+=e.vx*S,e.y+=e.vy*S,e.x<a.x+e.r&&(e.x=a.x+e.r,e.vx=Math.abs(e.vx)),e.x>a.x+a.w-e.r&&(e.x=a.x+a.w-e.r,e.vx=-Math.abs(e.vx)),e.y<a.y+e.r&&(e.y=a.y+e.r,e.vy=Math.abs(e.vy)),e.vy>0&&e.y+e.r>l.y&&e.y<l.y+10&&Math.abs(e.x-l.x)<s+e.r){let r=(e.x-l.x)/s,h=Math.hypot(e.vx,e.vy)*1.01,x=-Math.PI/2+r*1.05;e.vx=Math.cos(x)*h,e.vy=Math.sin(x)*h,e.y=l.y-e.r}for(let r of u){if(!r.alive||e.x+e.r<r.x||e.x-e.r>r.x+r.w||e.y+e.r<r.y||e.y-e.r>r.y+r.h)continue;r.alive=!1,m+=10,N(r.x+r.w/2,r.y+r.h/2,r.col);let h=Math.min(e.x+e.r-r.x,r.x+r.w-(e.x-e.r)),x=Math.min(e.y+e.r-r.y,r.y+r.h-(e.y-e.r));h<x?e.vx=-e.vx:e.vy=-e.vy;break}if(e.y>l.y+60){b.playing&&(w--,w<=0&&(M=!0,m>v&&I("breakout",v=m))),R();break}}u.some(d=>d.alive)||(m>v&&I("breakout",v=m),k())}f.fillStyle=o.bg,f.fillRect(0,0,i.w,i.h),o.glow&&(f.shadowBlur=12);for(let t of u)t.alive&&(f.fillStyle=t.col,o.glow&&(f.shadowColor=t.col),f.fillRect(t.x,t.y,t.w,t.h));f.shadowBlur=0;for(let t of P)t.x+=t.vx*c,t.y+=t.vy*c,t.vy+=600*c,t.life-=c,f.fillStyle=B(t.col,Math.max(0,t.life/.6)),f.fillRect(t.x,t.y,3,3);P=P.filter(t=>t.life>0),f.fillStyle=o.paddle,o.glow&&(f.shadowColor=o.paddle,f.shadowBlur=14),f.fillRect(l.x-s,l.y,l.w,8),f.fillStyle=o.ball,o.glow&&(f.shadowColor=o.ball),f.beginPath(),f.arc(e.x,e.y,e.r,0,Math.PI*2),f.fill(),f.shadowBlur=0;let y=Math.max(10,Math.min(14,i.w/90));p(f,`SCORE ${String(m).padStart(5,"0")}`,a.x,a.y,y,o.text),p(f,`HI ${String(v).padStart(5,"0")}`,i.w/2,a.y,y,o.text,"center"),p(f,b.playing?"\u2665".repeat(Math.max(0,w)):"",a.x+a.w,a.y,y,o.text,"right"),!b.playing&&Math.floor(n*1.6)%2===0&&p(f,"DEMO \xB7 MOVE TO PLAY",i.w/2,l.y+22,y,B(o.text,.75),"center"),M&&(p(f,"GAME OVER",i.w/2,a.y+a.h*.45,y*2.4,o.text,"center"),p(f,"CLICK OR PRESS SPACE",i.w/2,a.y+a.h*.45+y*3.4,y,B(o.text,.7),"center"))}}}};export{z as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as x}from"./chunk-JLRXT2AZ.js";import{a as R}from"./chunk-4ZBXB36L.js";import{f as i}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var T={id:"bricks",name:"Toy Bricks",description:"Seen from above, a baseplate where toy bricks snap down one by one until the error is built. Studs, shadows and all.",category:"Playful",kind:"2d",motion:"live",tags:["canvas","toy","bricks","building","colorful","playful","kids"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Under construction",title:"This page is missing a few pieces.",message:"We built everything we could from the instructions. Step 404 seems to be missing.",actions:[{label:"Back to the box",href:"/",variant:"primary"}]},params:{plate:"#3a9d4a",colors:["#d62828","#f7b801","#1f6feb","#ffffff","#111111"],bg:"#e9e4da"},theme:{bg:"#e9e4da",fg:"#1a1a1a",accent:"#d62828","accent-fg":"#fff"},presetName:"Classic",presets:{pastel:{name:"Pastel",params:{plate:"#f2e6ff",colors:["#ffb3c7","#a8d8ff","#ffe08a","#b8f0c8"],bg:"#fff8f2"},theme:{bg:"#fff8f2",accent:"#2a1a33"}},space:{name:"Space Set",params:{plate:"#1d2a55",colors:["#d9dce6","#3bd6ff","#9aa0a6","#ffd23f"],bg:"#0b1022"},theme:{bg:"#0b1022",fg:"#eef2ff",accent:"#3bd6ff","accent-fg":"#0b1022"}},mono:{name:"Monochrome",params:{plate:"#d9d9d9",colors:["#111111","#555555"],bg:"#f2f2f2"},theme:{bg:"#f2f2f2",accent:"#111"}}},setup(b){let m=b.params,n=R(b),M=b.random,d=[],s=0,p=0,e=0,h=0,y=0,P=()=>{s=40,p=16,e=Math.floor(Math.min(n.w*.86/s,n.h*.6/p)),h=Math.floor((n.w-s*e)/2),y=Math.floor(n.h*.05);let o=x(b.copy.code||"404",36,13,900),t=new Uint8Array(468);d=[];for(let r=0;r<13;r++)for(let f=0;f<36;f++){if(!o[r*36+f]||t[r*36+f])continue;let u=1;for(let l of[4,3,2]){let a=f+l<=36;for(let c=0;a&&c<l;c++)a=!!o[r*36+f+c]&&!t[r*36+f+c];if(a){u=l;break}}for(let l=0;l<u;l++)t[r*36+f+l]=1;d.push({x:f+2,y:r+1.5,w:u,col:m.colors[Math.floor(M()*m.colors.length)]})}d.sort(()=>M()-.5)};P();let v=(o,t,r,f)=>{o.fillStyle=i("#000000",.25),o.beginPath(),o.arc(t+e*.06,r+e*.08,e*.3,0,Math.PI*2),o.fill(),o.fillStyle=f,o.beginPath(),o.arc(t,r,e*.3,0,Math.PI*2),o.fill(),o.fillStyle=i("#ffffff",.35),o.beginPath(),o.arc(t-e*.08,r-e*.08,e*.12,0,Math.PI*2),o.fill()};return{resize(){n.reset(),P()},frame(o){let t=n.g;n.reset(),t.fillStyle=m.bg,t.fillRect(0,0,n.w,n.h),t.fillStyle=i("#000000",.15),t.fillRect(h+8,y+10,s*e,p*e),t.fillStyle=m.plate,t.fillRect(h,y,s*e,p*e);for(let l=0;l<p;l++)for(let a=0;a<s;a++)v(t,h+(a+.5)*e,y+(l+.5)*e,m.plate);let f=b.reducedMotion?99:o%14,u=Math.min(d.length,Math.floor(f*40));for(let l=0;l<u;l++){let a=d[l],c=f-l/40,S=Math.max(0,1-c*6),g=h+a.x*e,w=y+a.y*e-S*e*2.5;t.fillStyle=i("#000000",.28*(1-S)),t.fillRect(g+e*.12,w+e*.18+S*e*2.5,a.w*e,e),t.fillStyle=a.col,t.fillRect(g,w,a.w*e-1,e-1),t.fillStyle=i("#000000",.12),t.fillRect(g,w+e-4,a.w*e-1,3);for(let k=0;k<a.w;k++)v(t,g+(k+.5)*e,w+e*.5,a.col)}}}}};export{T as default};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import"./chunk-URWX3LLV.js";var s={id:"broken-link",name:"Broken Link",description:"A minimal line illustration of a snapped chain link above the text. Says \u201Cbroken link\u201D without a single word.",category:"Simple",kind:"2d",motion:"live",tags:["simple","illustration","line-art","link","chain","fast","light"],layout:"center",copy:{eyebrow:"404",title:"This link is broken",message:"The page it pointed to has moved or no longer exists.",actions:[{label:"Back to home",href:"/"}]},params:{line:"#111827",swing:!0},theme:{bg:"#ffffff",fg:"#111827",accent:"#111827","accent-fg":"#ffffff"},presetName:"Ink",presets:{dark:{name:"Dark",params:{line:"#e5e7eb"},theme:{bg:"#0c0d10",fg:"#e5e7eb",accent:"#e5e7eb","accent-fg":"#0c0d10"}},teal:{name:"Teal",params:{line:"#0f766e"},theme:{bg:"#f0fdfa",fg:"#134e4a",accent:"#0f766e","accent-fg":"#fff"}}},css:`
|
|
2
|
+
& .bl{width:clamp(130px,18cqw,200px);margin:0 auto clamp(18px,4cqh,36px);pointer-events:none}
|
|
3
|
+
& .lp-stage>.bl{position:absolute;left:50%;top:20%;translate:-50% 0}
|
|
4
|
+
& .bl svg{width:100%;overflow:visible;fill:none;stroke:var(--ln);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
|
|
5
|
+
& .bl .sp{stroke-width:3;opacity:.6}
|
|
6
|
+
& .lp-code{display:none}
|
|
7
|
+
& .lp-title{font-weight:700;font-size:clamp(26px,4cqw,44px)}
|
|
8
|
+
`,setup(t){let e=document.createElement("div");e.className="bl",e.style.setProperty("--ln",t.params.line),e.innerHTML=`<svg viewBox="0 0 200 100" aria-hidden="true">
|
|
9
|
+
<g class="l"><path d="M88 34H52a16 16 0 0 0 0 32h36"/><path d="M60 50h20"/></g>
|
|
10
|
+
<g class="r"><path d="M112 34h36a16 16 0 0 1 0 32h-36"/><path d="M120 50h20"/></g>
|
|
11
|
+
<g class="sp"><path d="M100 18v8M88 22l4 6M112 22l-4 6M100 82v-8M88 78l4-6M112 78l-4-6"/></g></svg>`,(t.overlay?.querySelector(".lp-head")??t.stage).prepend(e);let n=e.querySelector(".l"),l=e.querySelector(".r");return{frame(r){if(!t.params.swing)return;let a=Math.sin(r*1.4)*5;n.setAttribute("transform",`translate(${-Math.abs(a)} 0) rotate(${-a} 88 50)`),l.setAttribute("transform",`translate(${Math.abs(a)} 0) rotate(${a} 112 50)`)},destroy:()=>e.remove()}}};export{s as default};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import{a as t,c as r,d as s,e as n}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var p={id:"brutalist",name:"Brutalist",description:"Neo-brutalism: thick black borders, hard offset shadows, a loud colour block and chunky buttons that press in when you click.",category:"Simple",kind:"2d",motion:"static",tags:["simple","brutalism","neo-brutalist","bold","loud","static","fast","light"],layout:"none",copy:{eyebrow:"Whoops",title:"This page took a wrong turn.",message:"We broke something, or you typed something. Either way, nothing lives here.",actions:[{label:"Get me out",href:"/",icon:"none"},{label:"Report it",href:"/contact",variant:"secondary",icon:"none"}]},params:{block:"#ffde59",shadow:8},theme:{bg:"#fdf6e3",fg:"#111111",accent:"#ff6b6b","accent-fg":"#111111",font:'"Space Grotesk","Archivo","Inter",system-ui,sans-serif'},presetName:"Yellow",presets:{pink:{name:"Pink",params:{block:"#ff90e8"},theme:{bg:"#f4f4f0",accent:"#23a094","accent-fg":"#111"}},blue:{name:"Blue",params:{block:"#7aa2ff"},theme:{bg:"#fffbeb",accent:"#ffde59"}},green:{name:"Green",params:{block:"#b8f35e",shadow:6},theme:{bg:"#ffffff",accent:"#111","accent-fg":"#b8f35e"}}},css:`
|
|
2
|
+
& .br{position:absolute;inset:0;display:grid;place-items:center;padding:20px;overflow:auto}
|
|
3
|
+
& .br .box{width:min(640px,100%);border:3px solid #111;background:var(--lp-bg);box-shadow:var(--sh) var(--sh) 0 #111;padding:clamp(20px,4cqw,40px)}
|
|
4
|
+
& .br .num{display:inline-block;background:var(--blk);border:3px solid #111;box-shadow:calc(var(--sh) / 2) calc(var(--sh) / 2) 0 #111;padding:2px 18px;
|
|
5
|
+
font-weight:800;font-size:clamp(64px,12cqw,128px);line-height:1;letter-spacing:-.05em;transform:rotate(-2deg)}
|
|
6
|
+
& .br .ey{display:block;margin-top:26px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px}
|
|
7
|
+
& .br h1{margin:8px 0 0;font-size:clamp(26px,4.2cqw,46px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
|
|
8
|
+
& .br p{margin:14px 0 0;font-size:16px;line-height:1.5;max-width:46ch}
|
|
9
|
+
& .br .lp-actions{justify-content:flex-start;gap:14px}
|
|
10
|
+
& .br .lp-btn{border:3px solid #111;border-radius:0;padding:12px 20px;font-weight:800;font-size:15px;box-shadow:4px 4px 0 #111;transition:transform .08s,box-shadow .08s}
|
|
11
|
+
& .br .lp-btn--primary{background:var(--lp-accent);color:var(--lp-accent-fg)}
|
|
12
|
+
& .br .lp-btn--secondary{background:#fff;color:#111}
|
|
13
|
+
& .br .lp-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111}
|
|
14
|
+
& .br .lp-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #111}
|
|
15
|
+
`,setup(e){let a=e.copy,o=s(e,"br",`<div class="box"><span class="num" aria-hidden="true">${t(a.code)}</span><span class="ey">${t(a.eyebrow)}</span><h1>${n(a.code)}${t(a.title)}</h1><p>${t(a.message)}</p></div>`,{blk:e.params.block,sh:e.params.shadow+"px"});return o.querySelector(".box").append(r(e)),{destroy:()=>o.remove()}}};export{p as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as w}from"./chunk-JLRXT2AZ.js";import{a as k}from"./chunk-4ZBXB36L.js";import{f as s}from"./chunk-HXSSPN2I.js";import"./chunk-IETNWEVK.js";import"./chunk-URWX3LLV.js";var T={id:"bubble-wrap",name:"Bubble Wrap",description:"A sheet of bubble wrap with the error printed into it. Pop every bubble you like. It's very satisfying and changes nothing.",category:"Playful",kind:"2d",motion:"interactive",tags:["canvas","toy","satisfying","interactive","light","tactile","funny"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Stress relief",title:"Pop a few. The page is still gone.",message:"We packed this page very carefully. It got lost in shipping anyway.",actions:[{label:"Unwrap the homepage",href:"/",variant:"primary"}]},params:{bg:"#d9e4ec",film:"#ffffff",ink:"#ff4d6d",size:34},theme:{bg:"#d9e4ec",fg:"#13202b",accent:"#13202b","accent-fg":"#fff"},presetName:"Clear",presets:{mint:{name:"Mint",params:{bg:"#d9f5ea",film:"#ffffff",ink:"#0f8a5a"},theme:{bg:"#d9f5ea",fg:"#0a2e20",accent:"#0a2e20"}},pink:{name:"Pink Mailer",params:{bg:"#ffd1e0",film:"#ffffff",ink:"#7a1f4a"},theme:{bg:"#ffd1e0",fg:"#3a0d22",accent:"#3a0d22"}},kraft:{name:"Kraft Box",params:{bg:"#c9a273",film:"#fff8ec",ink:"#1f6feb"},theme:{bg:"#c9a273",fg:"#2a1a0a",accent:"#2a1a0a"}},night:{name:"Midnight",params:{bg:"#10131c",film:"#9fb4ff",ink:"#ffd23f"},theme:{bg:"#10131c",fg:"#eef2ff",accent:"#eef2ff","accent-fg":"#10131c"}}},setup(o){let p=o.params,i=k(o),h=[],d=[],y=0,u=()=>{h=[];let a=p.size*Math.max(.75,Math.min(1.1,i.w/1440)),b=Math.floor(i.w/a)+1,e=Math.floor(i.h*.66/(a*.87))+1,t=Math.round(b*.8),m=Math.round(e*.6),f=w(o.copy.code||"404",t,m,900),n=Math.floor((b-t)/2),c=Math.floor(e*.12);for(let r=0;r<e;r++)for(let l=0;l<b;l++){let x=l>=n&&l<n+t&&r>=c&&r<c+m&&f[(r-c)*t+(l-n)];h.push({x:l*a+(r%2?a/2:0),y:r*a*.87+a*.5,r:a*.4,code:x,popped:0,wob:Math.random()*6})}};u();let M=(a,b)=>{for(let e of h)if(!e.popped&&Math.hypot(e.x-a,e.y-b)<e.r){e.popped=1,y++,d.push({x:e.x,y:e.y,life:.35}),o.invalidate();break}},g=!1;return o.on("pointerdown",a=>{a.target.closest("a,button")||(g=!0,M(o.pointer.x,o.pointer.y))}),o.onWindow("pointerup",()=>g=!1),o.on("pointermove",()=>g&&M(o.pointer.x,o.pointer.y)),{resize(){i.reset(),u()},frame(a,b){let e=i.g;i.reset(),e.fillStyle=p.bg,e.fillRect(0,0,i.w,i.h),e.fillStyle=s(p.film,.18),e.fillRect(0,0,i.w,i.h*.7);for(let t of h){let m=o.pointer.inside?Math.max(0,1-Math.hypot(t.x-o.pointer.x,t.y-o.pointer.y)/60):0,f=t.r*(t.popped?.9:1+m*.05+Math.sin(a*2+t.wob)*.008);if(t.popped){e.strokeStyle=s(p.film,.5),e.lineWidth=1,e.beginPath();for(let c=0;c<=8;c++){let r=c/8*Math.PI*2,l=f*(.7+(c*37+Math.floor(t.x))%5*.06);c?e.lineTo(t.x+Math.cos(r)*l,t.y+Math.sin(r)*l):e.moveTo(t.x+Math.cos(r)*l,t.y+Math.sin(r)*l)}e.stroke();continue}let n=e.createRadialGradient(t.x-f*.35,t.y-f*.4,f*.05,t.x,t.y,f);n.addColorStop(0,s("#ffffff",.95)),n.addColorStop(.25,s(p.film,.45)),n.addColorStop(.85,s(t.code?p.ink:p.film,t.code?.75:.22)),n.addColorStop(1,s("#000000",.18)),e.fillStyle=n,e.beginPath(),e.arc(t.x,t.y,f,0,Math.PI*2),e.fill(),e.strokeStyle=s("#ffffff",.55),e.lineWidth=1,e.stroke()}for(let t of d){t.life-=b||.016,e.strokeStyle=s(p.ink,Math.max(0,t.life*2.4)),e.lineWidth=2;for(let m=0;m<6;m++){let f=m/6*Math.PI*2,n=(.35-t.life)*120+10;e.beginPath(),e.moveTo(t.x+Math.cos(f)*n*.6,t.y+Math.sin(f)*n*.6),e.lineTo(t.x+Math.cos(f)*n,t.y+Math.sin(f)*n),e.stroke()}}d=d.filter(t=>t.life>0),e.fillStyle=s(p.ink,.8),e.font="700 12px ui-monospace,Menlo,monospace",e.textAlign="right",e.fillText(`${y} popped`,i.w-16,i.h*.7+18)}}}};export{T as default};
|