siricee / frontend-playground

This is an Experimental Playground for testing demos and effects. 我的前端线上作品集（偏3D方向） Live: https://sirice-playground.netlify.app/

My FrentEnd Playground

This is a Experimental Playground for testing demos and effects.

Cover Reference

• Distorted Map: https://codepen.io/supah/pen/gdegrW

• [unused] Background Image: https://codepen.io/phillip-gimmi/pen/XWOdEMW

View Reference

Case Study: Design Embraced Portfolio – 2024 | Codrops https://tympanus.net/codrops/2024/03/21/case-study-design-embraced-portfolio-2024/

Outline Sample: https://codesandbox.io/p/sandbox/edgesgeometry-iup24

mesqme/waterfalls https://github.com/mesqme/waterfalls

https://gotohiroki.github.io/distorted-curve-slider/

https://codepen.io/alphardex/pen/MWvadVW

List Hover Image Ripple https://codepen.io/alphardex/pen/bGZJzNN

TODO

codesandbox: https://codesandbox.io/s/webgl-plane-curl-57l7h2?from-embed

https://github.com/devloop01/webgl-image-interactions-aristide

WebGL Structure & Tyndall Effect: nemutas/light-shaft Preview

michalzalobny/webgl-3d-engine: WebGL2 3D Engine built from scratch.

WebGPU Structure: neuroprod/webgpu: webgpu game

液态图片：gotohiroki/homunculus: https://github.com/gotohiroki/homunculus Live: https://gotohiroki.github.io/homunculus/dist/

球形玻璃：gotohiroki/ha-labo-2d https://github.com/gotohiroki/ha-labo-2d Live: https://gotohiroki.github.io/ha-labo-2d/dist/

X 上的 Karim Maaloul：Fire Shader. I needed a fire shader in The Cursed Library, so I thought it would be interesting to deconstruct the techniques behind. Made with @threejs and custom shaders. / X https://twitter.com/yakudoo/status/1786372418027626885 Codepen: https://codepen.io/Yakudoo/pen/ZEZWKJy