Necati
@necatikcl
Followers
6,604
Following
90
Media
105
Statuses
453
Design Engineer @WhopIO , Magic @LueStudio
Ankara, TR
Joined November 2021
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Bills
• 110054 Tweets
Lamar
• 97497 Tweets
Ravens
• 96700 Tweets
Bengals
• 79081 Tweets
Phillies
• 72731 Tweets
Browns
• 63747 Tweets
Giants
• 60758 Tweets
#GHDBT5
• 53282 Tweets
Watson
• 51045 Tweets
Burrow
• 43229 Tweets
Broncos
• 40761 Tweets
49ers
• 39122 Tweets
Texans
• 36842 Tweets
Packers
• 33955 Tweets
Aces
• 29098 Tweets
Seahawks
• 27910 Tweets
Harper
• 23287 Tweets
Josh Allen
• 21779 Tweets
Nacho
• 21688 Tweets
De Gea
• 21369 Tweets
Rams
• 19938 Tweets
#StrayKids_Dominate_AMAs
• 18879 Tweets
STRAY KIDS BOYBAND LEGACY
• 18301 Tweets
Cardinals
• 15975 Tweets
Castellanos
• 15351 Tweets
ثوب الصحه
• 14676 Tweets
Zac Taylor
• 11816 Tweets
Purdy
• 10822 Tweets
Jordan Love
• 10163 Tweets
McDermott
• 10113 Tweets
A website full of animations & javascript handlers with a perfect Lighthouse score? Whenever I make a Lighthouse test in , I feel refreshed 🥰
Should I share the tips?
47
59
1K
On a day in February, I had crafted all this animation using nothing but CSS.
Use CSS, nothing can be power as it is when it comes to animations.
16
30
632
Level up your animations
#4
🚀
✨ Switch to cubic-bezier over ease/linear.
Wonder why my CSS animations always glide so smoothly? My secret? I opt for cubic-bezier(0.6, 0.6, 0, 1) over the usual ease or linear. Try it!
6
34
497
Animations. Reinvented.
@WorkOS
Get ready for this one! 👀 It's all about the details 🫠 Every single rectangle crafted with Figma
39
19
575
9
24
349
It fits perfect on the most animated section ever 🤯
HQ:
Last drop for today 🎩 Sunday, Funday ✨🪄
⌘ Tools: Cinema4D, RedShift, After Effects, Figma
HQ:
35
29
801
4
17
326
🐙 Design comes alive
4
27
291
🌊 Why I use
@QwikDev
instead of Nuxt/Next?
#1
Because it makes it easy to achieve a perfect page speed score 🫠
All my Qwik projects show such a performance that the me in the past could not even dream of it.
📌 Here's how I coded lightning fast SaaS landing pages.
A website full of animations & javascript handlers with a perfect Lighthouse score? Whenever I make a Lighthouse test in , I feel refreshed 🥰
Should I share the tips?
47
59
1K
14
42
284
Sneakpeek from dev 🚧
16
18
564
6
6
261
Identify code vulnerabilities 🔎
Made with CSS
3
1
251
Front-end magic is done, a radar in web just looks stunning 🥵
HQ:
6
6
234
🔒Unveiling the new lock animation I've been working on. SOC II to GDPR, it's all in the details.
🔊 Sounds on!
10
9
220
Just too unrealistic for Web 🪄 Some work in progress... w/
@reflectnotes
@oguzyagizkara
Reflection for Reflect 😵💫
All the animation was done in Figma ✨
HQ:
32
27
628
6
8
183
WIP 😶🌫️ User can try pretty much everything from the app, inside the landing 🫠
w/
@oguzyagizkara
🪄
for
@joindimension
3
6
179
Exciting news!
The new landing for Reflect is now live! 🥳
After a month's work, I am truly thrilled to share the development process behind its creation... 👇
🔗
9
4
163
WIP! ✨ Just whipped up a slick CMD+K preview right on Dimension's landing page! Clicks become keys, and keys unlock everything!
w/
@oguzyagizkara
2
8
163
I am very glad to have the chance to work with the coolest team on the world; and really proud of the work we've built together 🫶
🔗See it live:
6
5
141
Cursors got an upgrade 🫠
6
7
128
I guess I am kinda a pagespeed developer now :D
I used
@QwikDev
in my personal website too and thrilled about how it made the optimizing process much more easier than the popular javascript frameworks.
7
7
124
can't be humble here, this is crazy 🫢
3
1
114
Who could've expected that a card to have such an attractive meaning 😍
0
2
109
😶🌫️
20
46
956
3
2
107
The best animations speak for themselves. Here's a glimpse of our latest creation with
@oguzyagizkara
– "send a message to GitHub, and watch it come alive in our app.”
No words needed, the motion tells the tale. 🫠
0
8
104
We are just trying to create the smoothest dashboard of 2024 🤫
I still can't believe this is real 💀 Many thanks to
@necatikcl
for creating this magical experience. It feels absolutely amazing! The clicking sensation is pure perfection 🤤 Details matter.
HQ:
18
17
552
2
0
97
Done 🤩
Used
@motiondotdev
for making the consecutive animations less complicated 🥵
w/
@reflectnotes
HQ:
Notes with an AI assistant? 👀
w/
@reflectnotes
It's on the way
@necatikcl
is making his magic 🪄
5
12
199
0
3
92
Creating UI animations is a life style 🫠
3
4
89
✨Floating stars with no libraries.
Honestly, every front-end dev should learn how to use canvas; it is truly the best choice for these kind of particle effects.
🧑🏻💻Codepen:
No libraries, no images; the stars are just a pure Javascript canvas😶🌫️I don't know why but this my favorite card right now...
3
0
42
3
7
82
I am too excited for this project 😍 Soon, I will publish an animation that I've never seen before... (Hint: magic wand)
2
3
79
Better Animations Tip
#2
⚡️ Use Javascript Web Animations API instead of 3rd party libraries!
Third-party animation libraries have their place, but the inbuilt Web Animations API (WAAPI) can be a superior choice for many situations. Let's explore why!
(1/7)
3
7
71
Now with a draw animation 🫠
1
0
70
🫠 We don't even have a mobile version yet, but...
Getting used to
@QwikDev
, I don't even need to look back to my code now, it is optimised by default.
5
9
62
Looks epic with the animations combined 😍
3
4
64
Ever thought about adding a splash of vibrant colors to your web projects?
Swap your usual 'color' for 'color: color(display-p3 1 0.5 0)'! 🎨
It offers a 33%~~ vibrant colors for the P3 supported screens.
A useful SCSS p3 convertor in the comments ⬇️
1
0
60
Added animations + MUSIC, the final version shook my heart 🤯
(🔊Sounds on)
6
1
59
Front-end Performance Tips
#2
⚠️ Consider PNGs for complex, large-size visuals
Using SVGs for vector graphics on your site? They're great for scalability, but can sometimes bog down performance. Here's why:
5
4
57
Front end performance tips
#4
🔮Elevate your images for retina screens.
Use `srcset` to show crystal-clear images for retina users, without forcing other monitors to download 2x large images.
0
1
56
Advertise your account with one animation
1
4
48
Just set the *illusion* to 100% and I am stuck in the loop 🫠
0
2
47
Looks like a real wand now 🤤
3
1
45
Can’t wait to code this 😧
1
0
46
No libraries, no images; the stars are just a pure Javascript canvas😶🌫️I don't know why but this my favorite card right now...
3
0
42
Better Animations Tip
#1
⚠️ Avoid animating the layout!
When animating properties like `top`, `left`, `padding`, or `margin`, the browser performs heavy calculations on every frame. Let's dive into some examples to understand this better.
1/6
4
1
40
The chart just got upgraded 🔥
Sticky info? - done.
Gradient smooth chart? - done.
Cool interactions? - done.
w/
@necatikcl
✨
HQ:
6
6
205
2
1
39
Misko just stole my role but he explains it better than I’ve ever could 😅🫶 Thank you!
We don't download the whole movie before starting to watch it.
Why do we have to download the whole application before it becomes interactive?
Imagine a world where the Application could be streamed to you in the same way as Movies.
21
52
339
1
2
40
After 2 incredible years of development, we're beyond excited to finally launch Wope! 🚀
Every retweet, every upvote on Producthunt, helps us reach more people. Let's spread the word and make this launch a grand success. Appreciate your support! 💫
We've spent two hard-working years on this, feeling a bit shy but really proud!
🔮 Big news: Wope is now officially out there. ✨
- Give us a hand by sharing this tweet: 💟🔀
- If you like what we do, support us on Producthunt: 🔼💬
Click this tweet to see the launch URL 🚀👀
4
31
109
3
2
40
This👇
Every time I work with a designer I tell them to do whatever you want, front-end is my problem, not yours to consider.
Then they gave me the wildest creative work ever. Just give them freedom.
And all I do is literally just sitting and not stopping until that stupid text effect
2
11
83
0
0
39
Front-end Performance Tips
#1
⚠️ Use FE blurs as a last resort
CSS filters like `filter: blur()` and `backdrop-filter: blur()` may be visually appealing, but they can impact your site's performance significantly. Here's why:
(1/7)
2
4
38
Front-end Performance Tips
#3
🛠️ Optimizing Web Fonts
Web Fonts are critical for good design, but they can also have a significant impact on your site's performance. Here's why and how you can optimize them:
3
4
36
Our work on Wiza just got released 🎉
Abracadabra 🪄
New release alert 🧙♂️ Are you ready to dive into a magical world?
Wiza's website just got a sparkling redesign that is going to put some magic into your day ✨
Design by me:
@oguzyagizkara
Development:
@necatikcl
See live →
75
47
767
2
0
32
Better Animations Tip
#3
🚀 Run expensive animations only when they're visible!
Animations add flair to your site, but they can also consume resources. A savvy way to optimize performance is to run heavy animations only when they're visible. Let's understand how.
1/7
3
1
31
Funny thing is that everyone talks about conversions but their only metric is their assumptions
2
2
30
😎
0
0
30
Been missing building a product, this project is just what I needed 😍
Sticky info? - done.
Gradient smooth chart? - done.
Cool interactions? - done.
w/
@necatikcl
✨
HQ:
6
6
205
0
0
29
Calling all web enthusiasts! I'm excited to share my knowledge as a front-end developer. Tell me what interests you in web development, and I'll create engaging content just for you. Let's explore the world of web together!
8
1
24
Dear
@figma
, please add a functionality to export the color definitions as CSS variables... It is like hell to move them to CSS :/
2
0
24
Developing CSS to Safari is not a hard task, you can just use `autoprefixer` plugin to support it; thanks to that most of the time I don't need to look after my CSS at all.
2
0
19
🪄
Sunday magic 🧙♂️
Tools & Plug-ins: After Effects, Figma, AEUX (Figma to After Effects), Volna
27
40
562
1
0
18
I tried
@cursor_ai
for just one day, we will definitely be together for a very long time. It's really handy to have a coding optimized AI at hand.
Good to see AI is coming closer to my workspace day by day.
2
0
16
As a final note, be sure to check out
@oguzyagizkara
's tweet, where he shares insights into the design process behind Reflect's new landing page. A fantastic collaboration that brought this project to life! 🎉🚀
Big news ✨
Are you ready to be blown away?
Reflect's website just got a massive redesign that's going to leave you speechless 🫧
Join me as I take you through the journey of how we made it happen 🪄
See live:
137
174
2K
4
2
15
@chronark_
@vercel
@QwikDev
Desktop version shouldn't be the qualifying score dude, there shouldn't be a landing without 99+ desktop score.
1
0
14
CSS -> SCSS -> Tailwind 💀
Yes, I've also taken that poison...
css → sass → less → stylus → css-modules → tachyons → styled-components → emotion → css-modules → stitches → vanilla-extract → tailwind → css
69
93
999
3
0
14
The most beautiful code editor ever 😍
1
0
14
💥
Announcement Alert 🪄
Hold your breath, get ready for a surprise!
The Dimension's website has been reinvented and reimagined. Prepare to be amazed 🫶
I can't wait to show you the ins and outs of this fantastic redesign adventure 🔍
See live →
46
46
627
1
0
13