Loading video...

Video Failed to Load

Go Home

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.

BalintFerenczy's profile picture

balint

2,694 subscribers

185,581 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Made a random projects during the end sem : Make your retro photos using it and post it on Twitter 😋 - you can add different filters in your image - can change the background colour - can download the png - mobile responsive too Here is the link:
1:35

Made a random projects during the end sem : Make your retro photos using it and post it on Twitter 😋 - you can add different filters in your image - can change the background colour - can download the png - mobile responsive too Here is the link:

Sam ☕

24,636 views • 7 months ago

I made a midi controller with Svelte. This thing can be played by your computer keyboard, top two rows for keys, bottom row for chords. In locked key mode, you can change the key and play all chords within that key.
0:24

I made a midi controller with Svelte. This thing can be played by your computer keyboard, top two rows for keys, bottom row for chords. In locked key mode, you can change the key and play all chords within that key.

Scott Tolinski - Syntax.fm

30,503 views • 1 year ago

Built a modular and dynamic CHUNK type system component in Framer using React and pure CSS. I created a responsive construction system first, then hand crafted every single letter and number in CSS so each glyph has its own structure, balance and character. As the frame changes, the typography reshapes rather than just scales. Part font, part layout engine, part self-inflicted obsession.
0:41

Built a modular and dynamic CHUNK type system component in Framer using React and pure CSS. I created a responsive construction system first, then hand crafted every single letter and number in CSS so each glyph has its own structure, balance and character. As the frame changes, the typography reshapes rather than just scales. Part font, part layout engine, part self-inflicted obsession.

Lee Black

10,580 views • 3 months ago

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source
0:40

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

Om Patel

152,749 views • 3 months ago

Created by the best, vetted by your favorites, the ALIENWARE Pro Line will change the way you play🏆 Get ready to #BreakThroughYourGame with the Alienware Pro Wireless Mouse & Keyboard 👽
0:47

Created by the best, vetted by your favorites, the ALIENWARE Pro Line will change the way you play🏆 Get ready to #BreakThroughYourGame with the Alienware Pro Wireless Mouse & Keyboard 👽

Team Liquid

192,800 views • 2 years ago

If you have an asset in Figma and you'd like to change it's colour to your perferred colour (quick and efficient way), layer the colour over the image in "Fill" properties and apply a *colour* mix-blend mode to it. Exporting it as an asset has a different workflow.
0:45

If you have an asset in Figma and you'd like to change it's colour to your perferred colour (quick and efficient way), layer the colour over the image in "Fill" properties and apply a *colour* mix-blend mode to it. Exporting it as an asset has a different workflow.

seyi

16,832 views • 2 years ago

It’s the little things… something so simple yet done wrong so often can change the way you hit the baseball… but are you paying attention to details?
1:49

It’s the little things… something so simple yet done wrong so often can change the way you hit the baseball… but are you paying attention to details?

Jonah Artiles

19,564 views • 8 months ago

The way you interact with your PC is changing. “We believe this shift to conversational input will be as transformative as the mouse and keyboard.” Meet the computer you can talk to.
0:24

The way you interact with your PC is changing. “We believe this shift to conversational input will be as transformative as the mouse and keyboard.” Meet the computer you can talk to.

Windows

53,051 views • 9 months ago

The way you interact with your PC is changing. “We believe this shift to conversational input will be as transformative as the mouse and keyboard.” Meet the computer you can talk to.
0:20

The way you interact with your PC is changing. “We believe this shift to conversational input will be as transformative as the mouse and keyboard.” Meet the computer you can talk to.

Windows

44,820 views • 9 months ago

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.
2:55

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,496 views • 1 year ago

This bird makes music using its wings The club-winged manakin (a bird found in Ecuador and Colombia) does not produce its courtship sound with its voice. Instead, the male generates sound using specially modified wing feathers by rapidly vibrating them so the feathers strike each other in quick succession, creating a pure, flute-like tone during its courtship display. Listen to this
0:55

This bird makes music using its wings The club-winged manakin (a bird found in Ecuador and Colombia) does not produce its courtship sound with its voice. Instead, the male generates sound using specially modified wing feathers by rapidly vibrating them so the feathers strike each other in quick succession, creating a pure, flute-like tone during its courtship display. Listen to this

Science girl

64,592 views • 2 months ago

I just downloaded the Naver keyboard to use to drown out spam comments during weverse lives You can switch between your normal keyboard and the Naver one so ill just use it for lives, but it auto translates everything you type from English directly into korean!! #BTS #BTSarmy
0:51

I just downloaded the Naver keyboard to use to drown out spam comments during weverse lives You can switch between your normal keyboard and the Naver one so ill just use it for lives, but it auto translates everything you type from English directly into korean!! #BTS #BTSarmy

UK ARMY Streaming⁷

11,882 views • 2 months ago

No your eyes aren't deceiving you - this is a real colour-changing #Supercar! The #Lotus Evija stole the show on the second day of #FOS, first with an epic burnout - utilising the 2027PS produced by its four electric motors - and then by switching through several different eye-catching paint jobs on its way to the top of the Goodwood Hill. Why pick one colour for your Supercar when you could have them all?!
0:51

No your eyes aren't deceiving you - this is a real colour-changing #Supercar! The #Lotus Evija stole the show on the second day of #FOS, first with an epic burnout - utilising the 2027PS produced by its four electric motors - and then by switching through several different eye-catching paint jobs on its way to the top of the Goodwood Hill. Why pick one colour for your Supercar when you could have them all?!

Goodwood FOS

147,442 views • 1 year ago

Today we're excited to launch Action: a Claude computer use launcher for macOS. Action is a macOS launcher that can take actions (click, type, and more) on your Mac using Claude’s computer use API. The interface is a floating window triggered by a keyboard shortcut, similar to Spotlight. This lets you see what the model outputs as it performs actions.
0:23

Today we're excited to launch Action: a Claude computer use launcher for macOS. Action is a macOS launcher that can take actions (click, type, and more) on your Mac using Claude’s computer use API. The interface is a floating window triggered by a keyboard shortcut, similar to Spotlight. This lets you see what the model outputs as it performs actions.

Lawrence Chen

21,622 views • 1 year ago

Cool Canynes don't look at explosions. 😎 This Buddy's still got your back in #MHStories3! Plus you can change their fur color and combat capabilities using the Dual-Element system!
0:20

Cool Canynes don't look at explosions. 😎 This Buddy's still got your back in #MHStories3! Plus you can change their fur color and combat capabilities using the Dual-Element system!

Monster Hunter

70,157 views • 3 months ago

🏌️‍♂️ Built this Tournament Brackets using only Expo and Reanimated. Inspired by my first ever app that never made it to the store 😅
0:27

🏌️‍♂️ Built this Tournament Brackets using only Expo and Reanimated. Inspired by my first ever app that never made it to the store 😅

Arunabh Verma

65,268 views • 1 year ago

Seven years strong, guided by your trust, your moves, and your voice. Powered by millions of users. Inspired by you. You’re the reason we made it this far. Now hit play and see how you made it super. #BingXSuper7 #VoiceofUsers #BingXHBD #BingXUserFirst
0:54

Seven years strong, guided by your trust, your moves, and your voice. Powered by millions of users. Inspired by you. You’re the reason we made it this far. Now hit play and see how you made it super. #BingXSuper7 #VoiceofUsers #BingXHBD #BingXUserFirst

BingX

5,594,702 views • 1 year ago

introducing annotation mode in AI Studio refining your app should be as easy as pointing at what you want to change: simply highlight any component, button or text in your app and Gemini will handle the heavy lifting
0:37

introducing annotation mode in AI Studio refining your app should be as easy as pointing at what you want to change: simply highlight any component, button or text in your app and Gemini will handle the heavy lifting

Google AI Studio

122,249 views • 8 months ago