Loading video...

Video Failed to Load

Go Home

dot matrix tricker component made with css and canvas inspired by Marijana Pavlinić's wonderful portfolio → (still wip)

MaximeHeckel's profile picture

Maxime

13,138 subscribers

14,670 views • 8 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.
0:30

Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.

balint

185,581 views • 1 year ago

the team cooked an insane demo on SMFS dot ai just put in the files (made with css and claude!)
0:30

the team cooked an insane demo on SMFS dot ai just put in the files (made with css and claude!)

Dhravya Shah

107,396 views • 2 months ago

Introducing Dotmatrix🗿 A collection of 55+ free and open-source dot-matrix loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours. Link: 👇🏼
0:59

Introducing Dotmatrix🗿 A collection of 55+ free and open-source dot-matrix loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours. Link: 👇🏼

shawn.

145,374 views • 2 months ago

While designers use Figma, I create cinematic experiences with CSS 🎬🧑‍💻 Meet Mr. Polygon, a geometric, animated portrait made entirely with HTML & CSS 🔥 Inspired by Mannie Live Demo: GitHub: Show some love 🤲🏽💙
0:54

While designers use Figma, I create cinematic experiences with CSS 🎬🧑‍💻 Meet Mr. Polygon, a geometric, animated portrait made entirely with HTML & CSS 🔥 Inspired by Mannie Live Demo: GitHub: Show some love 🤲🏽💙

Ezekiel 🕸️

21,450 views • 8 months ago

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇
0:24

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,440 views • 2 years ago

Forgot to show these guns to you guys. A revolver and an HMG that's inspired by that smart gun in ALIEN. (Explosion and stuff are still WIP btw)
0:48

Forgot to show these guns to you guys. A revolver and an HMG that's inspired by that smart gun in ALIEN. (Explosion and stuff are still WIP btw)

MATTO

58,806 views • 8 months ago

Test with a few actions (no shape keys). I might be onto something Mouth ctrl inspired by @soraninArt (mine still missing a lot of phonemes) #b3d #WIP #rigging
1:22

Test with a few actions (no shape keys). I might be onto something Mouth ctrl inspired by @soraninArt (mine still missing a lot of phonemes) #b3d #WIP #rigging

A$AP BERG

19,450 views • 2 years ago

A major physical painting that was initiated with A.I was acquired today by the forward thinking and innovative Blondie. I recently posted a WIP and Blondie, without hesitation, commented ‘dibs’. She didn’t know yet that the WIP was 100% A.I. and she didn’t know it also inspired a physical. The A.I. work was made by training a MidJourney Model on some of my works. The image that emerged inspired me to create a version with the traditional medium of oil paint on canvas. I am super thrilled to announce that the visionary collector Blondie acquired “Drive-by Diagnosis”, 48” X 60”, for 9.45 eth. 🙏🙏🙏 LFG
0:57

A major physical painting that was initiated with A.I was acquired today by the forward thinking and innovative Blondie. I recently posted a WIP and Blondie, without hesitation, commented ‘dibs’. She didn’t know yet that the WIP was 100% A.I. and she didn’t know it also inspired a physical. The A.I. work was made by training a MidJourney Model on some of my works. The image that emerged inspired me to create a version with the traditional medium of oil paint on canvas. I am super thrilled to announce that the visionary collector Blondie acquired “Drive-by Diagnosis”, 48” X 60”, for 9.45 eth. 🙏🙏🙏 LFG

hafftka

24,740 views • 2 years ago

Subscriptions Calendar. Made with Tailwind and Framer Motion. Inspired by Kumail Nanji
0:20

Subscriptions Calendar. Made with Tailwind and Framer Motion. Inspired by Kumail Nanji

LN

418,251 views • 1 year ago

Subscription Calendar with more details. Made with Tailwind and Framer Motion. Inspired by @KumailNanji
0:26

Subscription Calendar with more details. Made with Tailwind and Framer Motion. Inspired by @KumailNanji

LN

133,483 views • 1 year ago

Send Money Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal
0:21

Send Money Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal

LN

10,757 views • 1 year ago

Subscription Calendar with more views. Made with Tailwind and Framer Motion. Inspired by @KumailNanji x @dana_daniellaa
0:34

Subscription Calendar with more views. Made with Tailwind and Framer Motion. Inspired by @KumailNanji x @dana_daniellaa

LN

49,764 views • 1 year ago

Subscriptions Calendar – Revisited Made with Tailwind and Framer Motion. Inspired by Kumail Nanji x @dana_daniellaa
0:24

Subscriptions Calendar – Revisited Made with Tailwind and Framer Motion. Inspired by Kumail Nanji x @dana_daniellaa

LN

17,933 views • 1 year ago

cosplay try on. ( still not finished ) inspired by " switch hero " art by kontorn boonyanate. everythings made by me using eva foam and some small 3d parts.
0:51

cosplay try on. ( still not finished ) inspired by " switch hero " art by kontorn boonyanate. everythings made by me using eva foam and some small 3d parts.

the Fantastic Nami

126,050 views • 1 year ago

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~
0:26

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

114,785 views • 8 months ago

Exploring a fun beat 'em up game mockup with tango vibes and my character designs. Inspired by games from Lizard Cube. 🐷🦊🎮 #GameDev #WIP
0:22

Exploring a fun beat 'em up game mockup with tango vibes and my character designs. Inspired by games from Lizard Cube. 🐷🦊🎮 #GameDev #WIP

Nehuen Defosse

89,746 views • 2 years ago

Galactus cosplay WIP video I can't wait to finish crafting and start painting ! Made by me with EVA Foam
0:26

Galactus cosplay WIP video I can't wait to finish crafting and start painting ! Made by me with EVA Foam

Cecilosaurus

11,848 views • 1 year ago

I created LinkNode, an open-source tool that generates one link for all your links. Inspired by Fayaz Ahmed's onelink repo. Try out : Built with Next.js, shadcn, and Tailwind CSS. #buildinpublic
0:39

I created LinkNode, an open-source tool that generates one link for all your links. Inspired by Fayaz Ahmed's onelink repo. Try out : Built with Next.js, shadcn, and Tailwind CSS. #buildinpublic

Suraj

82,110 views • 2 years ago