web UI snippets

Wave Motion Effect | Demo 1 | Codrops

UVCanvas

Interactive Repulsion Effect | Demo 2

UI Snippets

uilabs

Tooltip Animations | Codrops

scroll-snap-spacer - CodeSandbox

WebGL Image Transitions | Demo 1 | Codrops

I give you <Glass /> and <GlassBorder />:



Recently @artur_bien made some awesomely smooth frosted glass. 

After messing around and loving it i decided i had to make a component for it and then took it a little further, adding full border support…

Perlin Noise Composite Mask Animated Backdrop

breathing-dots-checkpoint-7 - CodeSandbox

Configurator for Creating Custom WebGL Distortion Effects | Preset 1 | Codrops

Glide to Reveal Secret Code 🤙

Motion-Primitives

Keyboard shortcuts components built on @shadcn 

<ShortcutsProvider os="mac">
    <KeyCombo 
        keyNames={[Keys.Command, "z"]} 
    />
</ShortcutsProvider>

I just recreated Apple Tab Pill Animation in @tailwindcss 

Play link:

Okay, bye.

Copter – A SASS template for Framer

MacOS Dock - CodeSandbox

drei/meshportalmaterial can now be entered with a single prop, "blend". it will have lots of creative potential, for spatial UI and the meaning of "routes".

made a small showcase using models from my fav designer on sketchfab @FaruqTawsif 

sandbox

Infinite scrollable and draggable (WebGL)grid

MRR Counter with linear() 🎬

MotionNumber for Framer Motion

Introducing Vaul - an unstyled drawer component for React.



Components

Grid to Fullscreen Animations | Codrops

Underlay Action Sheet

Inspiration for Search UI Effects | Demo 4 | Codrops

Motion Hover Effects | Demo 3

m46lkn49j - CodeSandbox

Image Dragging Effects | Demo 8 | Codrops