Slick by default

Modern CSS & web tricks that uplevel any interface — mostly pure CSS, a little JS. Each tile names the feature it uses. Poke them.

\n\n

Magnetic buttonpointer → transform

\n \n\n

Spotlight

Cursor spotlight--mx/--my + mask

\n \n\n

3D tilt + glareperspective + rotate

\n \n\n

Beam

Animated border@property + conic

\n \n\n

Aurora

Aurora meshblurred radial keyframes

\n \n\n

DECRYPTED

Text scrambleJS glyph cycling

\n \n\n

Liquid gold

Shimmer textbackground-clip: text

\n \n\n

HOVER

REVEAL

Clip-path wipeclip-path transition

\n \n\n

SHIP IT·SLICK·FAST·SHIP IT·SLICK·FAST·

Edge-fade marqueemask-image + keyframes

\n \n\n

Shimmer skeletongradient sweep

\n \n\n

0click to count

Count-upJS eased ticker

\n \n\n

scroll ↓···↑ top

Scroll-linked baranimation-timeline: scroll()

\n \n

\n\n \n

\n \n\n\n",[],[104],"fb9af8a8-7bce-46d8-9b8f-4e05a5efa728","index.html","b4f4ccc8-6031-11f1-b54d-1607ee4eb77e",8,["D",1780590942509],"\n\n\n\n\nHyperdesigns — a garden of living surfaces\n\n\n\n\n\n\n\n

\n \n

Hyperdesigns

A garden of living surfaces

Bounded WebGL shaders that can't blow out to white — plus two that spray when you click. Hover to quicken, click to stir or splash.

\n\n

Tideteal liquid

Lavamolten embers

Auroranight curtains

Inkmono swirl

Plasmaelectric flow

Mercuryliquid chrome

Cellsvoronoi

Causticsunderwater light

Oiliridescent slick

CRTretro phosphor

Spritzclick to spray

Sparkclick to burst

\n\n \n

\n \n\n\n",[],[112],["D",1780590225407],[122,123,124,125],[19],{"_37":76,"_13":77,"_40":78,"_42":43,"_44":45,"_46":79,"_48":49,"_50":135,"_17":81,"_53":66,"_54":82,"_56":57,"_58":-5,"_100":136,"_18":137},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":132,"_17":65,"_53":24,"_54":74,"_56":57,"_58":-5,"_100":133,"_18":134},{"_37":60,"_13":61,"_40":62,"_42":43,"_44":45,"_46":63,"_48":49,"_50":129,"_17":65,"_53":66,"_54":67,"_56":57,"_58":-5,"_100":130,"_18":131},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":126,"_17":52,"_53":24,"_54":55,"_56":57,"_58":-5,"_100":127,"_18":128},["D",1780590955585],[],[19,39],["D",1780591168244],[],[19,61],["D",1780591151205],[],[19,70],["D",1780590926903],[],[19,77],"7c402379-8300-40ba-a87b-5995a8647a1f",["D",1780590190719],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A garden of WebGL living-surface button takes + click-spray FX","imageUrl","userId","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_192":188},"org",{"_11":12,"_185":186,"_187":188,"_148":149,"_189":190,"_191":57},"branch",{"_17":63,"_13":16,"_37":45,"_177":138,"_178":-5,"_179":-5,"_180":-5,"_181":-5,"_182":-5,"_183":14,"_184":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789549199&sig=ba6cb56be519e398fb1aaf2bfc5a08e515fd30b1ec6971317843b793c46a262f","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":138,"_13":14,"_50":255,"_140":-5,"_141":57,"_142":143,"_144":143,"_145":146,"_147":-5,"_148":149,"_150":-5,"_151":57,"_152":-5,"_153":-5,"_154":65,"_155":156,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":162,"_163":162,"_164":165,"_166":165,"_167":165,"_168":162,"_169":162,"_170":256,"_172":257,"_174":258,"_176":57},[231,236,237,238],"files",[231,232,233,234,235,236,237,238],"counts",{"_222":65,"_223":52,"_224":65,"_32":225,"_226":227},[214,215,216,217],{"_37":84,"_44":45,"_40":43,"_13":19,"_54":-5,"_53":85,"_17":65,"_42":-5,"_50":212,"_46":87,"_58":-5,"_18":213},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1780590225407],[19],{"_37":76,"_13":77,"_40":78,"_42":43,"_44":45,"_46":79,"_48":49,"_50":80,"_17":81,"_53":66,"_54":82,"_56":57,"_58":-5,"_18":221},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":73,"_17":65,"_53":24,"_54":74,"_56":57,"_58":-5,"_18":220},{"_37":60,"_13":61,"_40":62,"_42":43,"_44":45,"_46":63,"_48":49,"_50":64,"_17":65,"_53":66,"_54":67,"_56":57,"_58":-5,"_18":219},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":24,"_54":55,"_56":57,"_58":-5,"_18":218},[19,39],[19,61],[19,70],[19,77],"pulls","branches","forks",{"_228":65,"_230":65},"connections",{"_228":65,"_229":65},"count","unfilledCount","emptyCount",{"_37":84,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":87,"_48":49,"_50":119,"_17":65,"_53":85,"_54":-5,"_56":57,"_58":-5,"_100":253,"_18":254},{"_37":76,"_13":77,"_40":78,"_42":43,"_44":45,"_46":79,"_48":49,"_50":135,"_17":81,"_53":66,"_54":82,"_56":57,"_58":-5,"_100":251,"_18":252},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":132,"_17":65,"_53":24,"_54":74,"_56":57,"_58":-5,"_100":249,"_18":250},{"_37":60,"_13":61,"_40":62,"_42":43,"_44":45,"_46":63,"_48":49,"_50":129,"_17":65,"_53":66,"_54":67,"_56":57,"_58":-5,"_100":247,"_18":248},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":126,"_17":52,"_53":24,"_54":55,"_56":57,"_58":-5,"_100":245,"_18":246},{"_37":111,"_13":112,"_40":113,"_42":-5,"_44":45,"_46":114,"_48":49,"_50":115,"_17":81,"_53":24,"_54":116,"_56":57,"_58":-5,"_100":243,"_18":244},{"_37":103,"_13":104,"_40":105,"_42":-5,"_44":45,"_46":106,"_48":49,"_50":107,"_17":65,"_53":24,"_54":108,"_56":57,"_58":-5,"_100":241,"_18":242},{"_37":93,"_13":94,"_40":95,"_42":-5,"_44":45,"_46":96,"_48":49,"_50":97,"_17":52,"_53":98,"_54":99,"_56":57,"_58":-5,"_100":239,"_18":240},[],[94],[],[104],[],[112],[],[19,39],[],[19,61],[],[19,70],[],[19,77],[232,233,234,235],[19],["D",1780590190719],{"_11":12,"_192":188},{"_11":12,"_185":186,"_187":188,"_148":149,"_189":190,"_191":57},{"_17":63,"_13":16,"_37":45,"_177":138,"_178":-5,"_179":-5,"_180":-5,"_181":-5,"_182":-5,"_183":14,"_184":12},"ctx",{"_170":-5,"_209":292,"_293":294,"_295":296,"_297":57,"_298":57,"_299":57,"_300":49,"_301":-5,"_302":-7,"_303":-7,"_304":65,"_305":57,"_306":57,"_307":-5,"_308":57,"_309":57,"_310":57,"_311":-5},"ENV",{"_263":264,"_265":266,"_267":16,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]