Tim Wilson
@actualTimWilson
Followers
1,922
Following
120
Media
109
Statuses
563
Design Engineer @dubdotco . Building magical software and sharing cool UI stuff along the way. Charming UI components:
Pittsburgh, PA
Joined January 2013
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
オリンピック
• 693899 Tweets
#บัสซิ่งไทยแลนด์EP7
• 476070 Tweets
Christians
• 466897 Tweets
Islam
• 386455 Tweets
Last Supper
• 329098 Tweets
花火大会
• 231222 Tweets
França
• 184772 Tweets
1M LOVE LINGORM
• 165177 Tweets
YOKOFAYE WATCH BLANK
• 122627 Tweets
グラブル
• 122334 Tweets
Judo
• 115648 Tweets
#SixTONESANN
• 73043 Tweets
Hezbollah
• 70021 Tweets
柔道の審判
• 65030 Tweets
金メダル
• 49767 Tweets
Leclerc
• 48837 Tweets
Basquete
• 37588 Tweets
Arabia
• 34121 Tweets
Checo
• 33728 Tweets
Majdal Shams
• 32126 Tweets
Equi
• 30822 Tweets
永山竜樹選手
• 23019 Tweets
ハンドボール
• 22316 Tweets
コラボガチャ
• 21852 Tweets
مجدل شمس
• 19486 Tweets
Wemby
• 18710 Tweets
Babiarza
• 18296 Tweets
Alcaraz
• 18031 Tweets
ガルリゴス
• 17538 Tweets
Gobert
• 16920 Tweets
Druze
• 14818 Tweets
Wembanyama
• 11869 Tweets
#HereWithJho
• 10724 Tweets
Fran Garrigós
• 10563 Tweets
Playing with colorful "god rays" for a new site.
(CSS repeating linear gradients with exclusion blend mode)
49
51
1K
Use cookies that outlive login sessions to remind users which option they use!
38
35
936
Here's the code for those "god rays" I’ve been sharing!
20
55
689
Taking this dynamic lighting idea a step further 🪄
Now supporting multiple lights and rounded borders.
21
33
590
Animated border trails are a little more complicated than they look
16
24
595
I'm thrilled to share that I've joined
@dubdotco
as a Design Engineer!
Very excited to be building the future of link management with such an incredible team 🪄
21
5
178
@mattwensing
It sure isn’t lazy when it comes to generating several cheery sentences to preface every response, though!
(at least until you tell it not to)
3
2
165
In the interest of not delaying this thing any more, I'm going to share my newest project today: CharmUI
CharmUI is a collection of charming, production-ready React + Tailwind components for you to use on your own site.
6
7
99
Sharing this CSS holographic button effect again since it inspired the god rays from last week!
Explanation + code below ⬇️
2
5
81
Playing with particles!
Pure HTML/CSS, no JS. Anyone interested in learning how it works?
7
1
56
🚀 Today I'm launching CharmUI, a collection of charming, production-ready React + Tailwind components for you to use on your own site.
With 10 components available now and many more coming soon, I can't wait to make CharmUI a no-brainer for building an incredible website!
4
2
52
A colorful blob, built with Tailwind CSS (no JS)
Code below ⬇️
2
4
48
Playing with glitter (CSS w/ noise images + JS for mouse position)
Full res video below ⬇️
2
0
34
I've been experimenting with overlaying a WebGL fragment shader on a website, where bounding box uniforms are passed to ray-march 2D lighting.
This could make it super easy to add fully dynamic lighting and shadows to any website.
3
4
31
@marcel_halb
I’m not fully happy with the effect yet but once I am I’ll share an update + code!
5
0
30
Background:
I've been experimenting with overlaying a WebGL fragment shader on a website, where bounding box uniforms are passed to ray-march 2D lighting.
This could make it super easy to add fully dynamic lighting and shadows to any website.
3
4
31
0
0
28
I'll share the code for both light and dark tomorrow once I've gotten it into a CodePen!
0
0
23
For those who thought of auroras:
0
1
22
@steventey
@calcom
@trunkio
@retool
@skiffprivacy
I’ve been slowly working on one of these for a new project!
2
0
21
CSS Tip ✨
You can create 3D particle animations with just a bunch of HTML elements and some CSS.
The trick: transform-style: preserve-3d
This allows you to transform a parent element while allowing its children to exist in their own 3D space.
Translate/rotate a parent
3
0
17
Some progress on CharmUI's first landing page template 💫
2
1
17
I made a lightweight package that makes it super easy to render a fragment shader to an HTML canvas! Check it out here:
2
0
15
Working on some focus states for keyboard navigation
(think it still needs a little more contrast)
2
0
15
Created a WebGL fragment shader version of
@JohnPhamous
's noise-based shimmer effect!
Explanation + code below 👇
2
1
13
Lots of good feedback on the waves experiment but I'm taking a break 😅
Here's the code (GLSL) if anybody wants to play with it!
1
0
14
Imposter syndrome has been kicking my ass lately. Thanks for all the support ❤️
4
0
13
Added a loading animation to the shiny button I shared a few weeks back.
Code below ⬇️
2
1
13
Adding a "backgrounds" category to CharmUI, starting with god rays!
1
0
13
What little effects and animations do you have on your site to charm visitors?
7
0
12
With several components ready to go and more in the works, CharmUI is now ready for preorders!
For just $19 (> 50% off), you'll get full access as soon as it's ready.
Check it out here:
Some of my favorite components below ⬇️
1
0
12
I’m tempted to try implementing this properly with the View Transitions API but browser support has me hesitating.
2
0
10
Working on a smoky stage effect by blending CSS gradients with WebGL-powered smoke.
Not quite right yet 🤔
0
0
10
@shuding_
Was playing with something similar a while back - also using SDF / ray marching!
Taking this dynamic lighting idea a step further 🪄
Now supporting multiple lights and rounded borders.
21
33
590
1
1
9
Almost ready!
Thinking about launching CharmUI as “beta” to give people access even though I don’t feel like it has enough content yet. Thoughts?
3
0
3
3
0
9
Who’s pushing the boundaries of web design?
Looking for some new folks to follow!
4
1
9
One step closer to launching CharmUI: (very basic) OG images for every component!
1
0
8
For those who saw yesterday's tweet about the waves: better or worse?
5
0
8
Today, I'm launching ✨ WriteStellar ✨, a blogging platform that puts *writing* first – no cluttered dashboards, themes, or plugins. Just a focused writing experience, with one click to publish.
1
1
8
It feels like writing performant CSS animations is still harder than it needs to be.
Maybe there’s an opportunity for something as easy to use as framer-motion or GSAP that orchestrates everything with generated CSS.
1
0
8
Seems like everybody’s buying domains right now. Got any good ones?
4
0
7
Sometimes when I look directly at these waves it just looks like horizontal translation rather than waves moving up and down.
How can I fix that?
8
0
7
Adding lighting to your site would look like this. Just supply the elements and the lights, and the shader overlay does the rest.
0
0
7
Looks like the dark mode might be a little broken… will try to get that fixed later today!
2
0
7
Here's an example:
Just a few lines of code outside of the shader itself!
2
0
7
Many users drop off before writing their first post, so I'm working on AI-powered writing suggestions to help them get started!
#buildinpublic
1
0
5
Dimming the god rays when navigating away from the landing page 👌
Keeps things consistent without overwhelming content pages.
1
0
6
@jh3yy
I’d love to do this with pure CSS but I haven’t found a way that isn’t nasty because the timing itself is dependent on the aspect ratio.
Not sure if there’s a good way around that 🤔
1
0
6
Trying to figure out a light version of this card component but I haven't cracked it yet 🤔
2
0
6
Constantly torn between “good enough” for a product and “good enough” for the designer in me.
…not that I can call myself a designer, but you know what I mean!
0
0
6
Active states are often overlooked but they make a huge difference in UI feel
1
0
6
The trick: two striped rainbow gradients moving in opposite directions (based on mouse position) with difference blending.
The effect is emphasized with a glow effect, plus scale and rotation transforms to face the mouse.
Here's the code:
0
0
6
Thank you for all the preorders already today ❤️
I promise it’ll be well beyond worth it.
With several components ready to go and more in the works, CharmUI is now ready for preorders!
For just $19 (> 50% off), you'll get full access as soon as it's ready.
Check it out here:
Some of my favorite components below ⬇️
1
0
12
0
0
6
I’m going to work on making things even easier, plus some more useful default uniforms, but I think this is a good start!
0
0
6
1
0
6