Portals, strokes, misc

🚨💚🤙 BREAKING: Jhey Tompkins to Shopify, here we go! Agreement in place between all parties involved

works great on blocks of text too 🤙

.text {
--duration: calc(var(--text-length) * 0.12s);  
animation: shimmer var(--duration) infinite;
}
@​keyframes shimmer {
0% { background-position: 100% 0; }
}

animation-duration maps to the text length using CSS custom properties 🚀

a 3D CSS breakdown of what's happening 🤙

the trick is background-image layers powered by the same custom property for position and size

then that's combined with a background-clip combo ✂️

Recreated this Glowing Clock inspired by @alex_barashkov using only CSS (no SVG, no images) + React.

Built entirely from scratch just by looking the original design, no @figma or @rive_app involved!

Preview and code linked in the first comment.

here's the exploded view of what's happening 🤙

powered by one CSS custom property, transition grid-template-columns for the digits ⚡️

few lines of JS to make it work in other browsers ✅

Lightsaber loader in @figma ✨
Just few gradients with Color blend. File shaded. Go check out

toggle 🌛

brought to life with CSS && SVG

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏

(now with improved timing ✨)

My favorite animation of this year.

Little boxes takes a random seed on each refresh
It gives a full set with a random algorithm

realvjy's figma plugins

CSS Tip! 💫

You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀)

.warp {
  container-type: size;
  perspective: 100px;
  transform-style: preserve-3d;
  resize: both;
  overflow: hidden;
}

Couple of tricks in…

This year has been extremely fun exploring interaction design, I still have a lot to learn but I'm really looking forward for next year.

Built dynamic, real-time 2D shadows and light blocking, all in CSS. No WebGL, no shaders.

A super fun and versatile effect, perfect for CTAs and hero sections. Getting it right took some tweaking!

Got ideas for cool demos where this could shine? Might make it into a CodePen

Fire or electric?

@rive_app  🤝 @framer

Thanos Effect? I think it’s perfect naming.  All code finally available on CodePen. Snap responsibly

What's stopping us from designing buttons like this?

Tutorial: How to design @huly_io's pricing page card. 

Download AE files from our Learn page.

Home — Forgotten Runes Wizard's Cult

Inspired by the brilliant work of @nasm423  , @daniel__designs, and @paul_uiux, I’ve taken a shot at creating my own version of this card-stack animation!

Built using Framer Motion and CSS Scroll Snap, with plenty of trial and error along the way 😅

Momento: Sports & Music Scrapbook

CSS progressive blur: stack of empty overlay elements using backdrop-filter: blur() with varying strengths/mask 🤙

progressive blur in a scroll container

detail is to make sure the scrollbar doesn't get affected by the blur

Been loving the holo effect designs lately, so I did this :)

You can hover over it yourself, link in the thread:

(built in webflow with unicorn studio)

Forgotten Runes Wizard's Cult: 10k on-chain Wizard NFTs

uncharted territory ⚠️
section ui concept / @rive_app

More coming soon. It’s pretty obvious we used @splinetool, right?

#Crypto #Bitcoin #DeFi #Liquifying #Web3

To all the devs telling me my button style was impossible to build with code.

I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.

more figma things, replicated the sony ericsson logo

Create this expandable gallery using HTML and CSS 👨‍💻

Code in the comments 🚀

Remove Background Interaction by @_mustinov_

A conceptual NFT card for <n>Apple Inc.</n> by artist <n>Mati</n>.

css holographic trading card breakdown 🧑‍🍳

a combo of masked layers with mix-blend-mode

pointer position drives the scale/translate of the colored gradients 🌈

check the layers 👇