Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview...

RoyDigerhund's profile picture

Matthias Martin

1,151 subscribers

13,307 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

CSS Tip! 🤙 You can create custom easings for your animations and transitions with linear() 🔥 :root { --bounce: linear(0, 0.39, 0.57, 0.52, ..., 1); } .digit { transition: translate 1s var(--bounce); } Perfect for adding character to animations like this MRR widget! 🫶 Some of the easing code is obfuscated in the snippet there 👆 You would likely write these custom eases once and then reuse them in your projects 🎬 For example, here's the CSS for an elastic ease 🎾 :root { --elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } The idea is that you map a set of points between [0, 0] and [1, 1]. This is cool because you can convert something like an SVG path to these coordinates. Link below for a gist with some eases in 🤙 As for the MRR widget, the trick is to set out some number tracks and translate them to show the correct number 🧮 You can translate by line-height based on the value. And the original value you can convert to a currency string like $1,000,000.00 using JavaScript's Intl.NumberFormat() const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }) formatter.format(1_000_000) Check out the exploding view and the video to see how it all works! 👀 CodePen.IO link below! 👇
1:22

CSS Tip! 🤙 You can create custom easings for your animations and transitions with linear() 🔥 :root { --bounce: linear(0, 0.39, 0.57, 0.52, ..., 1); } .digit { transition: translate 1s var(--bounce); } Perfect for adding character to animations like this MRR widget! 🫶 Some of the easing code is obfuscated in the snippet there 👆 You would likely write these custom eases once and then reuse them in your projects 🎬 For example, here's the CSS for an elastic ease 🎾 :root { --elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } The idea is that you map a set of points between [0, 0] and [1, 1]. This is cool because you can convert something like an SVG path to these coordinates. Link below for a gist with some eases in 🤙 As for the MRR widget, the trick is to set out some number tracks and translate them to show the correct number 🧮 You can translate by line-height based on the value. And the original value you can convert to a currency string like $1,000,000.00 using JavaScript's Intl.NumberFormat() const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }) formatter.format(1_000_000) Check out the exploding view and the video to see how it all works! 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

574,747 görüntüleme • 2 yıl önce

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @​keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇
0:36

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @​keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

208,315 görüntüleme • 2 yıl önce

Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇
0:22

Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,858 görüntüleme • 2 yıl önce

Thoughts on transferable skills. I was surprised reading the comments to Riley’s question about best UI animation tool for web. To anyone interested in diving into motion design I would strongly recommend - aim to become a motion expert, not Jitter/Rive/Lottie specialist. If you start from the foundations, jumping into any animation tool will feel like a walk in the park. Keyframes, easing functions, transformations - same concepts are shared between all of them. Getting to know the foundations on the web means starting with CSS, Tailwind or React Motion. I’m often creating small motion concepts in Figma (see video) and then recreating them manually in code. Any language, it doesn’t matter because principles are the same. I recently made the switch to Swift and built a small animation tool for myself (see video) that I’ll discard after I’m done with the motion. This level of comfortableness with motion gives you unmatched flexibility. From that point, tools are just interfaces for expressing something you already deeply understand. This is not about performance or technical optimizations (Lottie files can outperform CSS equivalents), tools mentioned above really are great - it’s about developing transferable creative skill that lets you think across any medium, platform or tool.
0:48

Thoughts on transferable skills. I was surprised reading the comments to Riley’s question about best UI animation tool for web. To anyone interested in diving into motion design I would strongly recommend - aim to become a motion expert, not Jitter/Rive/Lottie specialist. If you start from the foundations, jumping into any animation tool will feel like a walk in the park. Keyframes, easing functions, transformations - same concepts are shared between all of them. Getting to know the foundations on the web means starting with CSS, Tailwind or React Motion. I’m often creating small motion concepts in Figma (see video) and then recreating them manually in code. Any language, it doesn’t matter because principles are the same. I recently made the switch to Swift and built a small animation tool for myself (see video) that I’ll discard after I’m done with the motion. This level of comfortableness with motion gives you unmatched flexibility. From that point, tools are just interfaces for expressing something you already deeply understand. This is not about performance or technical optimizations (Lottie files can outperform CSS equivalents), tools mentioned above really are great - it’s about developing transferable creative skill that lets you think across any medium, platform or tool.

Natko Hasic

64,045 görüntüleme • 1 yıl önce

Check out our #PAMI paper with code "Dense Continuous-Time Optical Flow from Event Cameras," where we show how to regress *continuous-time* trajectories of every pixel from event cameras alone or events plus frames! The key idea is to iteratively estimate per-pixel polynomials using a recurrent lookup and update scheme. Paper: Code: DOI: We present a method for estimating dense continuous-time optical flow from event data. Traditional dense optical flow methods compute the pixel displacement between two images. Due to missing information, these approaches cannot recover the pixel trajectories in the blind time between two images. We show that it is possible to compute per-pixel, continuous-time optical flow using events from an event camera. Events provide temporally fine-grained information about movement in pixel space due to their asynchronous nature and microsecond response time. We leverage these benefits to predict pixel trajectories densely in continuous time via parameterized Bézier curves. To achieve this, we build a neural network with strong inductive biases for this task: First, we build multiple sequential correlation volumes in time using event data. Second, we use Bézier curves to index these correlation volumes at multiple timestamps along the trajectory. Third, we use the retrieved correlation to update the Bézier curve representations iteratively. Our method can optionally include image pairs to boost performance further. To train and evaluate our model, we introduce a synthetic dataset (MultiFlow) that features moving objects and ground truth trajectories for every pixel. Our quantitative experiments suggest that our method successfully predicts pixel trajectories in continuous time and is competitive in the traditional two-view pixel displacement metric on MultiFlow and DSEC-Flow. Open source code and datasets are released to the public. Kudos to Mathias Gehrig Manasi Muglikar
0:23

Check out our #PAMI paper with code "Dense Continuous-Time Optical Flow from Event Cameras," where we show how to regress *continuous-time* trajectories of every pixel from event cameras alone or events plus frames! The key idea is to iteratively estimate per-pixel polynomials using a recurrent lookup and update scheme. Paper: Code: DOI: We present a method for estimating dense continuous-time optical flow from event data. Traditional dense optical flow methods compute the pixel displacement between two images. Due to missing information, these approaches cannot recover the pixel trajectories in the blind time between two images. We show that it is possible to compute per-pixel, continuous-time optical flow using events from an event camera. Events provide temporally fine-grained information about movement in pixel space due to their asynchronous nature and microsecond response time. We leverage these benefits to predict pixel trajectories densely in continuous time via parameterized Bézier curves. To achieve this, we build a neural network with strong inductive biases for this task: First, we build multiple sequential correlation volumes in time using event data. Second, we use Bézier curves to index these correlation volumes at multiple timestamps along the trajectory. Third, we use the retrieved correlation to update the Bézier curve representations iteratively. Our method can optionally include image pairs to boost performance further. To train and evaluate our model, we introduce a synthetic dataset (MultiFlow) that features moving objects and ground truth trajectories for every pixel. Our quantitative experiments suggest that our method successfully predicts pixel trajectories in continuous time and is competitive in the traditional two-view pixel displacement metric on MultiFlow and DSEC-Flow. Open source code and datasets are released to the public. Kudos to Mathias Gehrig Manasi Muglikar

Davide Scaramuzza

12,637 görüntüleme • 2 yıl önce

CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @​property --value { inherits: true; initial-value: 0; syntax: ' '; } @​keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .control__label { counter-reset: low var(--value) high calc(100 - var(--value)); } .control__label::before { content: "COFFEE " counter(low) "%"; } .control__label::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .control__track::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @​property --shift { initial-value: 0; inherits: true; syntax: ' '; } @​keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @​keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇
0:53

CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @​property --value { inherits: true; initial-value: 0; syntax: ' '; } @​keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .control__label { counter-reset: low var(--value) high calc(100 - var(--value)); } .control__label::before { content: "COFFEE " counter(low) "%"; } .control__label::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .control__track::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @​property --shift { initial-value: 0; inherits: true; syntax: ' '; } @​keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @​keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

377,586 görüntüleme • 2 yıl önce

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @​keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @​keyframes animation merely animates the offset-distance of that pseudoelement to 100% @​keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇
1:36

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @​keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @​keyframes animation merely animates the offset-distance of that pseudoelement to 100% @​keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

283,498 görüntüleme • 2 yıl önce

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @​property --value { syntax: ' '; } @​keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document​.documentElement​.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇
0:40

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @​property --value { syntax: ' '; } @​keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document​.documentElement​.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

251,867 görüntüleme • 2 yıl önce

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:
2:03

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:

Lee Robinson

118,242 görüntüleme • 1 yıl önce

CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document​.documentElement​.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇
1:25

CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document​.documentElement​.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

164,863 görüntüleme • 2 yıl önce

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @​property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @​supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @​keyframes show-cta { to { --show: 1; } } } Using @​supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇
0:29

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @​property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @​supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @​keyframes show-cta { to { --show: 1; } } } Using @​supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

133,020 görüntüleme • 2 yıl önce

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @​keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @​property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @​keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇
0:49

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @​keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @​property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @​keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

116,462 görüntüleme • 2 yıl önce

I’m thrilled to announce that we just released GraspGen, a multi-year project we have been cooking at NVIDIA Robotics 🚀 GraspGen: A Diffusion-Based Framework for 6-DOF Grasping Grasping is a foundational challenge in robotics 🤖 — whether for industrial picking or general-purpose humanoids. VLA + real data collection is all the rage now but is expensive and scales poorly for this task. For every new gripper and/or scene, you’ll have to recollect the dataset in this paradigm for the best perf. 💡Key Idea: Since grasping is such a well-defined task in simulation - why can’t we just scale synthetic data generation and train a generative model for grasping? By embracing modularity and standardized grasp formats, we can make this a turnkey technology that works zero-shot for multiple settings. GraspGen is a modular framework for diffusion-based 6-DOF grasp generation that scales across embodiment types, observability conditions, clutter, task complexity. Key Features: ✅ Multi-embodiment support: suction, parallel-jaw, and multi-fingered grippers ✅ Generalization to partial + complete 3D point clouds ✅ Generalization to single-objects + cluttered scenes ✅ Modular design uses other robotics modules and foundation models (SAM2, cuRobo, FoundationStereo, FoundationPose). This allows GraspGen to focus on only one thing - grasp generation ✅ Training recipe: grasp discriminator is trained with On-Generator data from the diffusion model - so that it learns to correct the mistakes (if any) of the diffusion generator ✅ Real-time performance (~20 Hz) before any GPU acceleration; low memory footprint 📊 Results: • SOTA on the FetchBench [Han et al. CoRL 2024] benchmark • Zero-shot sim-to-real transfer on unknown objects and cluttered scenes • Dataset of 53M simulated grasps across 8K objects from Objaverse 📄 arXiv: 🌐 Website: 💻 Code: A huge thank you to everyone involved in this journey — excited to see what the community builds on top of it! Joint work with Clemens Eppner , Balakumar Sundaralingam , Yu-Wei, Jun Yamada Wentao Yuan and other collaborators #robotics #diffusionmodels #physicalAI #simtoreal
0:39

I’m thrilled to announce that we just released GraspGen, a multi-year project we have been cooking at NVIDIA Robotics 🚀 GraspGen: A Diffusion-Based Framework for 6-DOF Grasping Grasping is a foundational challenge in robotics 🤖 — whether for industrial picking or general-purpose humanoids. VLA + real data collection is all the rage now but is expensive and scales poorly for this task. For every new gripper and/or scene, you’ll have to recollect the dataset in this paradigm for the best perf. 💡Key Idea: Since grasping is such a well-defined task in simulation - why can’t we just scale synthetic data generation and train a generative model for grasping? By embracing modularity and standardized grasp formats, we can make this a turnkey technology that works zero-shot for multiple settings. GraspGen is a modular framework for diffusion-based 6-DOF grasp generation that scales across embodiment types, observability conditions, clutter, task complexity. Key Features: ✅ Multi-embodiment support: suction, parallel-jaw, and multi-fingered grippers ✅ Generalization to partial + complete 3D point clouds ✅ Generalization to single-objects + cluttered scenes ✅ Modular design uses other robotics modules and foundation models (SAM2, cuRobo, FoundationStereo, FoundationPose). This allows GraspGen to focus on only one thing - grasp generation ✅ Training recipe: grasp discriminator is trained with On-Generator data from the diffusion model - so that it learns to correct the mistakes (if any) of the diffusion generator ✅ Real-time performance (~20 Hz) before any GPU acceleration; low memory footprint 📊 Results: • SOTA on the FetchBench [Han et al. CoRL 2024] benchmark • Zero-shot sim-to-real transfer on unknown objects and cluttered scenes • Dataset of 53M simulated grasps across 8K objects from Objaverse 📄 arXiv: 🌐 Website: 💻 Code: A huge thank you to everyone involved in this journey — excited to see what the community builds on top of it! Joint work with Clemens Eppner , Balakumar Sundaralingam , Yu-Wei, Jun Yamada Wentao Yuan and other collaborators #robotics #diffusionmodels #physicalAI #simtoreal

Adithya Murali

24,106 görüntüleme • 1 yıl önce

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀
1:17

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀

John Champ

10,940 görüntüleme • 1 yıl önce

Beta Blocker 3.6 is here and it introduces a BIG new feature. Here's everything that's new: 🖥️ UI Overhaul. The entire interface has been cleaned up to feel more premium, modern, and less boxed-in. 📐 Better Window Scaling. Wider windows now properly use the available space instead of stretching awkwardly or leaving everything floating in the center. 🎨 Live Preview. The Style tab now includes a real-time preview, so you can see exactly what your block will look like before you enable it. ⚙️ Cleaner Detection Settings. Detection settings have been reorganised and simplified so everything is easier to understand. 🧭 Reworked Help & Settings Layout. Important options are now easier to find with a cleaner settings and help structure. now for the big one… 🔄 REVERSE CENSOR REWORK This is the biggest part of the update. Reverse Censor has been completely rebuilt. Instead of blocking detected areas, it now applies your block across the screen while leaving detected parts visible. This also adds: ✨ New Reverse Censor settings tab 🌀 Blur or mosaic modes 🎚️ Strength controls 🖥️ Full monitor selection support ⚡ Live setting updates while blocking is active BUG FIXES & POLISH 🛠️ Fixed Reverse Censor sizing issues on second monitors, including Windows scaling modes like 125% 🖥️ Improved multi-monitor behaviour for effects and Popup Storm 🧹 Cleaned up the Help tab 🎯 Fixed Auto-Detect changing results after switching tabs 📷 Improved camera handling in virtual camera mode 🎮 Reduced cursor flicker while Beta Blocker is active for a smoother gaming experience 🖤 & lots more smaller QoL improvements throughout the app. sfw
0:20

Beta Blocker 3.6 is here and it introduces a BIG new feature. Here's everything that's new: 🖥️ UI Overhaul. The entire interface has been cleaned up to feel more premium, modern, and less boxed-in. 📐 Better Window Scaling. Wider windows now properly use the available space instead of stretching awkwardly or leaving everything floating in the center. 🎨 Live Preview. The Style tab now includes a real-time preview, so you can see exactly what your block will look like before you enable it. ⚙️ Cleaner Detection Settings. Detection settings have been reorganised and simplified so everything is easier to understand. 🧭 Reworked Help & Settings Layout. Important options are now easier to find with a cleaner settings and help structure. now for the big one… 🔄 REVERSE CENSOR REWORK This is the biggest part of the update. Reverse Censor has been completely rebuilt. Instead of blocking detected areas, it now applies your block across the screen while leaving detected parts visible. This also adds: ✨ New Reverse Censor settings tab 🌀 Blur or mosaic modes 🎚️ Strength controls 🖥️ Full monitor selection support ⚡ Live setting updates while blocking is active BUG FIXES & POLISH 🛠️ Fixed Reverse Censor sizing issues on second monitors, including Windows scaling modes like 125% 🖥️ Improved multi-monitor behaviour for effects and Popup Storm 🧹 Cleaned up the Help tab 🎯 Fixed Auto-Detect changing results after switching tabs 📷 Improved camera handling in virtual camera mode 🎮 Reduced cursor flicker while Beta Blocker is active for a smoother gaming experience 🖤 & lots more smaller QoL improvements throughout the app. sfw

Isla

313,430 görüntüleme • 2 ay önce

NEW APP UPDATE! 👑 Update your apps, Kings. Release 2.5.0 is now available in app stores. This update introduces the fully revamped Destiny Attack mechanic, increases game speed, fixes numerous issues/bugs, and continues to optimize & improve the first-time user experience (FTUE). Upcoming releases will focus on further FTUE enhancement for new players, and continue to introduce new features aimed at early retention and stickiness — en route to scale as we strive to become the #1 Luck Battle game in mobile, supercharged by onchain features. NEW FEATURES — 👑 Revamped Destiny Attack: We've refreshed the Destiny Attack with updated animations, lightning effects, and improved audio for more immersive battles. 👑 Destiny Attack Multipliers: Rewards are now multiplied by your Deal Multiplier. 👑 Feature Map Widget: New animated map lets players track city progress and preview upcoming unlocks directly from the play screen. 👑 Customizable End-Of-Level Reward Chests: Complete cities to unlock bonus rewards, now delivered through a sleek new chest system that evolves with the player journey. 👑 Improved Offer Popups (Phase 1): Redesigned sales & limited-time offer popups to feature smoother transitions, cleaner visuals, and a better browsing experience. IMPROVEMENTS — ⚡️ 3-Sword Attack & Destiny Attack sequences can both now be skipped with a tap. ⚡️ City completion rewards are now configurable per city for better scaling (end-of-level rewards will be updated in the near future to better reward deeper game progression). ⚡️ Badge system & Avatar images now load faster. ⚡️ Sales popups now support multiple animation styles in higher resolution. ⚡️ Improved UI responsiveness across attacks, tutorials, and reward screens. ⚡️ Reduced app size to meet further reduce load time. BUG FIXES — 🐛 Fixed a bug where autodeal wasn't working for returning players. 🐛 Fixed a bug where Destiny Attacks were only granting coin rewards for some players. Rewards are now randomized based on the attack type. 🐛 Fixed a bug where the incorrect city was being shown during Destiny Attacks for certain existing players. 🐛 Fixed numerous minor bugs causing crashes for some players. Additionally, multiple different types of live ops have resumed for players. See you in the game, Kings!
0:41

NEW APP UPDATE! 👑 Update your apps, Kings. Release 2.5.0 is now available in app stores. This update introduces the fully revamped Destiny Attack mechanic, increases game speed, fixes numerous issues/bugs, and continues to optimize & improve the first-time user experience (FTUE). Upcoming releases will focus on further FTUE enhancement for new players, and continue to introduce new features aimed at early retention and stickiness — en route to scale as we strive to become the #1 Luck Battle game in mobile, supercharged by onchain features. NEW FEATURES — 👑 Revamped Destiny Attack: We've refreshed the Destiny Attack with updated animations, lightning effects, and improved audio for more immersive battles. 👑 Destiny Attack Multipliers: Rewards are now multiplied by your Deal Multiplier. 👑 Feature Map Widget: New animated map lets players track city progress and preview upcoming unlocks directly from the play screen. 👑 Customizable End-Of-Level Reward Chests: Complete cities to unlock bonus rewards, now delivered through a sleek new chest system that evolves with the player journey. 👑 Improved Offer Popups (Phase 1): Redesigned sales & limited-time offer popups to feature smoother transitions, cleaner visuals, and a better browsing experience. IMPROVEMENTS — ⚡️ 3-Sword Attack & Destiny Attack sequences can both now be skipped with a tap. ⚡️ City completion rewards are now configurable per city for better scaling (end-of-level rewards will be updated in the near future to better reward deeper game progression). ⚡️ Badge system & Avatar images now load faster. ⚡️ Sales popups now support multiple animation styles in higher resolution. ⚡️ Improved UI responsiveness across attacks, tutorials, and reward screens. ⚡️ Reduced app size to meet further reduce load time. BUG FIXES — 🐛 Fixed a bug where autodeal wasn't working for returning players. 🐛 Fixed a bug where Destiny Attacks were only granting coin rewards for some players. Rewards are now randomized based on the attack type. 🐛 Fixed a bug where the incorrect city was being shown during Destiny Attacks for certain existing players. 🐛 Fixed numerous minor bugs causing crashes for some players. Additionally, multiple different types of live ops have resumed for players. See you in the game, Kings!

King Of Destiny 👑

17,260 görüntüleme • 1 yıl önce

The $AEGIS DApp portal is now open to all: 🛡️ At Aegis, we believe in empowering the blockchain full of security, transparency and innovation. The Aegis Dapp has been under development for several months prior to the launch of $AEGIS and with that we have been able to build what we believe has the potential to change how users go about their day to day security. We are thrilled to share our progress and truly exciting news with you all. 🎯 First things first, at Aegis, we want to make it clear that the value of what we seek to bring to security across the blockchain, comes from our big vision, our strong team, and our commitment to long-term goals. ℹ️ Let’s kick this off with some information that is constantly happening, which is behind the scenes. Our full team is dedicated to the opportunity that lays ahead of us with becoming the leading voice/name for security, grasping every aspect with innovation, hard work, passion and commitment to see this sector grow. Everyone is aware of how important security is, a heartwarming mention to Messari for including us on how they see this sector growing rapidly and pushing a 10 Billion evaluation. We take that recognition with full responsibility and gratitude as we've been working hard on some really powerful stuff that could change the game for our industry. If you read the title and report itself, I’m sure that’ll give you some insight to what’s coming, and to the vast extent of what you can expect Aegis to be working towards. —> 🤝 This comes from teaming up with others within this sector and coming up with new tech to projects driven by our community, within the pipeline you can be confident that what we are building will push the cryptocurrency industry as a whole into a better future, the magnitude to what Aegis brings will not stop until we can confidently say, “Negative security reports across the blockchain are at an all time low, thousands of users are satisfied that Aegis is protecting them and their assets.” We're sticking to our vision no matter what the market does or whatever else comes our way. We plan to build what we set out to and we will see to it that our ecosystem is met. We've been working on some pretty amazing products that will be available within our Dapp, let’s go over what we offer: * AI Audits * Live Monitoring * Penetration Testing * Bug Bounties * Live Watchdog * Token analytics for everyday users, developers, teams, auditors, institutions, investors. ⬇️ Let’s break it down for you in some simple steps: AI AUDITS: We have trained our LLM models as AI AGENTS, these consist of 3 people ( AI AGENTS ) for the audits that are performed. - Audit - Reviewer - Judge Each one analyzes with a different personality, let’s check what personalities our AI AGENTS consist of: 3 different perspective auditors. 1 - Fine-tuned model x amount reads the code and generates the audit. ✅ 2 - Model x amount reviews the code and fact checks thoroughly. ✅ 3 - Model x amount ranks the code based on the severity outcome. ✅ ⌚️ Live Monitoring/Watchdog: The Live Monitoring/Watchdog system is designed to provide real-time surveillance of smart contracts, ensuring the detection and prevention of any potentially harmful transactions or malicious activities. Through the utilization of an AI Agent model, the system is trained to proactively identify and thwart suspicious behavior, thereby safeguarding the integrity of the smart contracts. Also, a paid sophisticated threat detection model is available for more intricate protocols and Dapps, offering an advanced level of protection against potential threats. This proactive approach is crucial in mitigating the risk of exploitation and ensuring the security of the smart contract ecosystem. 🖊️ Pen Testing: Our platform offers Pen Testing services to developers, providing a controlled environment for whitehat hackers to simulate attacks and identify vulnerabilities in smart contracts and protocols. In addition to human whitehat hackers, our AI Agents function as Red and Blue teams, actively engaging in simulated attacks to stress-test protocols and identify potential weaknesses. This comprehensive approach allows developers to proactively identify and address security issues, ultimately enhancing the robustness and resilience of their projects. 🕷️ Bug Bounties: Our Bug Bounty listing platform provides developers with the opportunity to list their protocols and offer bounties to white hat hackers for identifying vulnerabilities. By aggregating millions of bounties from various platforms and utilizing AI tools, we streamline the testing process, reducing up to 80% of the workload typically associated with security testing. This allows developers to efficiently identify and address potential vulnerabilities in their protocols, ultimately enhancing the overall security and resilience of their projects. 🪙 And lot more token analytics features for regular users, this will give you the opportunity to explore our Dapp for yourself and have some fun diving into the security platform of the future! I’m sure you’re excited to try it all out yourself, which is why we have some exciting news to bring to the #Guardians of the blockchain! But just before you continue the read and see the beans have been spilled, we have to take this opportunity to share with you that this large step to becoming a security leader is but only 20% of what we have revealed. This will be at the core of what Aegis stands for and hopes to achieve. The focus here is upon our Dapp, and in time we will slowly bring forward information/updates regarding segments of what makes Aegis a force to be reckoned with. Now that you’re fired up and excited to all of the announcements to come, let’s get to the news you’ve been waiting for! 🎉 We’re spilling the good news, and are happy to say we are now set for public release! The team at Aegis are overwhelmed with the development, support from teams, community, partners and more on what we believe to be an institutional-grade product. But the fun doesn’t stop there, this marks the start of what we aim to become, as it will take time and cycles to become better and better. Constant advancements will be set in place to attain the goal of achieving blockchain security. A statement from our CEO- Brian Hunt: “I can confirm from the security conferences I attended with Centralized security firms Peckshield, Hacken, Certik, BlockSec presentations, they are trying to achieve something similar and it will take them years. Decentralized AI for Security!” This initial drop of our dapp will be to get users signed up to gain access, in which we’ll whitelist users to get the ball rolling. 📣 To end this segment, let’s get the party started with the long awaited Aegis Ai Security Dapp and sign up now!
2:06

The $AEGIS DApp portal is now open to all: 🛡️ At Aegis, we believe in empowering the blockchain full of security, transparency and innovation. The Aegis Dapp has been under development for several months prior to the launch of $AEGIS and with that we have been able to build what we believe has the potential to change how users go about their day to day security. We are thrilled to share our progress and truly exciting news with you all. 🎯 First things first, at Aegis, we want to make it clear that the value of what we seek to bring to security across the blockchain, comes from our big vision, our strong team, and our commitment to long-term goals. ℹ️ Let’s kick this off with some information that is constantly happening, which is behind the scenes. Our full team is dedicated to the opportunity that lays ahead of us with becoming the leading voice/name for security, grasping every aspect with innovation, hard work, passion and commitment to see this sector grow. Everyone is aware of how important security is, a heartwarming mention to Messari for including us on how they see this sector growing rapidly and pushing a 10 Billion evaluation. We take that recognition with full responsibility and gratitude as we've been working hard on some really powerful stuff that could change the game for our industry. If you read the title and report itself, I’m sure that’ll give you some insight to what’s coming, and to the vast extent of what you can expect Aegis to be working towards. —> 🤝 This comes from teaming up with others within this sector and coming up with new tech to projects driven by our community, within the pipeline you can be confident that what we are building will push the cryptocurrency industry as a whole into a better future, the magnitude to what Aegis brings will not stop until we can confidently say, “Negative security reports across the blockchain are at an all time low, thousands of users are satisfied that Aegis is protecting them and their assets.” We're sticking to our vision no matter what the market does or whatever else comes our way. We plan to build what we set out to and we will see to it that our ecosystem is met. We've been working on some pretty amazing products that will be available within our Dapp, let’s go over what we offer: * AI Audits * Live Monitoring * Penetration Testing * Bug Bounties * Live Watchdog * Token analytics for everyday users, developers, teams, auditors, institutions, investors. ⬇️ Let’s break it down for you in some simple steps: AI AUDITS: We have trained our LLM models as AI AGENTS, these consist of 3 people ( AI AGENTS ) for the audits that are performed. - Audit - Reviewer - Judge Each one analyzes with a different personality, let’s check what personalities our AI AGENTS consist of: 3 different perspective auditors. 1 - Fine-tuned model x amount reads the code and generates the audit. ✅ 2 - Model x amount reviews the code and fact checks thoroughly. ✅ 3 - Model x amount ranks the code based on the severity outcome. ✅ ⌚️ Live Monitoring/Watchdog: The Live Monitoring/Watchdog system is designed to provide real-time surveillance of smart contracts, ensuring the detection and prevention of any potentially harmful transactions or malicious activities. Through the utilization of an AI Agent model, the system is trained to proactively identify and thwart suspicious behavior, thereby safeguarding the integrity of the smart contracts. Also, a paid sophisticated threat detection model is available for more intricate protocols and Dapps, offering an advanced level of protection against potential threats. This proactive approach is crucial in mitigating the risk of exploitation and ensuring the security of the smart contract ecosystem. 🖊️ Pen Testing: Our platform offers Pen Testing services to developers, providing a controlled environment for whitehat hackers to simulate attacks and identify vulnerabilities in smart contracts and protocols. In addition to human whitehat hackers, our AI Agents function as Red and Blue teams, actively engaging in simulated attacks to stress-test protocols and identify potential weaknesses. This comprehensive approach allows developers to proactively identify and address security issues, ultimately enhancing the robustness and resilience of their projects. 🕷️ Bug Bounties: Our Bug Bounty listing platform provides developers with the opportunity to list their protocols and offer bounties to white hat hackers for identifying vulnerabilities. By aggregating millions of bounties from various platforms and utilizing AI tools, we streamline the testing process, reducing up to 80% of the workload typically associated with security testing. This allows developers to efficiently identify and address potential vulnerabilities in their protocols, ultimately enhancing the overall security and resilience of their projects. 🪙 And lot more token analytics features for regular users, this will give you the opportunity to explore our Dapp for yourself and have some fun diving into the security platform of the future! I’m sure you’re excited to try it all out yourself, which is why we have some exciting news to bring to the #Guardians of the blockchain! But just before you continue the read and see the beans have been spilled, we have to take this opportunity to share with you that this large step to becoming a security leader is but only 20% of what we have revealed. This will be at the core of what Aegis stands for and hopes to achieve. The focus here is upon our Dapp, and in time we will slowly bring forward information/updates regarding segments of what makes Aegis a force to be reckoned with. Now that you’re fired up and excited to all of the announcements to come, let’s get to the news you’ve been waiting for! 🎉 We’re spilling the good news, and are happy to say we are now set for public release! The team at Aegis are overwhelmed with the development, support from teams, community, partners and more on what we believe to be an institutional-grade product. But the fun doesn’t stop there, this marks the start of what we aim to become, as it will take time and cycles to become better and better. Constant advancements will be set in place to attain the goal of achieving blockchain security. A statement from our CEO- Brian Hunt: “I can confirm from the security conferences I attended with Centralized security firms Peckshield, Hacken, Certik, BlockSec presentations, they are trying to achieve something similar and it will take them years. Decentralized AI for Security!” This initial drop of our dapp will be to get users signed up to gain access, in which we’ll whitelist users to get the ball rolling. 📣 To end this segment, let’s get the party started with the long awaited Aegis Ai Security Dapp and sign up now!

AEGIS AI

127,936 görüntüleme • 2 yıl önce

I Built a 37.0 Profit Factor Bot by Cracking Every TradingView Source Code tradingview is a gold mine hiding in plain sight and i just found the master key to unlock every single secret hidden within its community scripts. most traders spend their entire lives staring at candles and hoping for a miracle while the actual alpha is buried in the open source code that nobody bothers to look at. i used to be that guy who sat there getting liquidated at three in the morning because i thought i could outplay the market with my gut feeling and some drawings on a screen. it turns out that the game is completely rigged against you if you are trading manually but there is a specific way to flip the script. i am going to show you how to stop guessing and start knowing exactly what works across every possible market condition before you ever risk a single dollar. i spent years losing money and thousands on developers because i thought i was not smart enough to code the systems myself but i was wrong. the first step to cracking the market is realizing that every indicator on the super charts has a source code section that is completely open to the public. you can literally scroll through the community scripts and pull the exact logic for thousands of different strategies that people claim are the holy grail of trading. but the secret is not just having the code because most of these indicators are actually garbage that will blow your account up in a week. this is where the real loop opens because you need a way to test these ideas across twenty five different data sets in seconds rather than months. i use a custom setup with ai agents specifically a sub agent i call the backtest architect to handle the heavy lifting of turning pine script into python code. the goal is to create a factory where you can feed in a raw indicator and get back a full report on its expectancy and profit factor without lifting a finger. most people find one strategy and marry it for life but a real data dog knows that you have to iterate to success or you will get left behind. i am running eighty one different backtests right now because i know that ninety percent of what i find will be trash but that remaining ten percent is where the wealth is made. the backtest architect knows exactly how to structure the folders and data paths so that we are testing everything from the base indicator to complex versions with filters. you might think that popular tools like fibonacci or order blocks are the way to go because everyone on social media talks about them like they are law. but when i actually ran the numbers through the machine the results were embarrassing and most of those strategies just resulted in negative expectancy. it is a dangerous trap to follow the crowd into a trade just because some guru said a certain level was important when the data shows it is a coin flip at best. the dynamic swing indicator was one of the few that actually held its weight during the recent massive testing sessions we ran. it was pulling in profit factors of over thirty seven with annualized returns that look too good to be true until you see the trade list. we combined it with filters like the adx and the money flow index to see if we could refine the signals and the results were absolutely staggering. when you have a system that can run through forty data sets while you are drinking tea you realize that manual trading is a form of self harm. i realized this after spending hundreds of thousands on apps and devs only to find out that i could just learn to build these bots myself live on the internet. the speed of iteration is the only thing that matters in this game because the faster you can fail the faster you can find the one strategy that actually prints. one of the biggest hurdles i faced was thinking that i needed to be a math genius or a senior engineer to automate my trading systems. the truth is that code is the great equalizer because it allows a regular person to compete with massive hedge funds by using the same logic and speed. i decided to learn everything in public because i wanted people to see the process of losing money with liquidations and then finally finding a path to automation. the reality of the market is that it moves in cycles and what worked yesterday will almost certainly fail tomorrow unless you are constantly testing. that is why i built the agents to automatically look through the results folder and rank the top performers based on a composite score. it takes all the emotion out of the process because i am no longer looking for a reason to enter a trade i am just looking at a csv file that tells me the truth. if you are still drawing lines on a chart and hoping for the best you are basically playing a game of chance against a high speed casino. the transition from a manual trader to a systems builder is the single most important pivot you will ever make in your life. it is not about being right or wrong it is about having a positive expectancy that has been proven across thousands of trades and multiple years of history. i had to fix a few errors in the short selling logic where the agents were getting confused between maximum and minimum values for take profit levels. these tiny bugs are the difference between a winning system and a blown account so you have to be willing to dive into the code and refine the machine. but once the system is tuned and the sub agents are running it becomes a beautiful workflow that functions entirely without your input. we are currently moving through the editors picks and the trending indicators one by one because i want to have a database of every single strategy on the platform. being a data dog means you never stop searching for that edge and you never settle for a strategy that just looks okay on a single chart. you have to demand excellence from your code because the market will not give you a single inch of mercy if you are lazy with your research. the ultimate goal is to have fully automated systems trading for you so you can focus on scaling rather than staring at a screen for ten hours a day. i am already up to over eighty backtests in this single session and i plan on hitting hundreds more by the end of the week. once you realize that you can crack the code of any indicator you see on the internet you will never look at a chart the same way again. this is the power of using agents to bridge the gap between a raw idea and a finished trading bot that actually works in the real world. i am done with getting liquidated and i am done with the stress of over trading because the code handles everything with cold precision. the path to success is paved with data and if you are not willing to automate your process you are just waiting for your next liquidation to happen
49:49

I Built a 37.0 Profit Factor Bot by Cracking Every TradingView Source Code tradingview is a gold mine hiding in plain sight and i just found the master key to unlock every single secret hidden within its community scripts. most traders spend their entire lives staring at candles and hoping for a miracle while the actual alpha is buried in the open source code that nobody bothers to look at. i used to be that guy who sat there getting liquidated at three in the morning because i thought i could outplay the market with my gut feeling and some drawings on a screen. it turns out that the game is completely rigged against you if you are trading manually but there is a specific way to flip the script. i am going to show you how to stop guessing and start knowing exactly what works across every possible market condition before you ever risk a single dollar. i spent years losing money and thousands on developers because i thought i was not smart enough to code the systems myself but i was wrong. the first step to cracking the market is realizing that every indicator on the super charts has a source code section that is completely open to the public. you can literally scroll through the community scripts and pull the exact logic for thousands of different strategies that people claim are the holy grail of trading. but the secret is not just having the code because most of these indicators are actually garbage that will blow your account up in a week. this is where the real loop opens because you need a way to test these ideas across twenty five different data sets in seconds rather than months. i use a custom setup with ai agents specifically a sub agent i call the backtest architect to handle the heavy lifting of turning pine script into python code. the goal is to create a factory where you can feed in a raw indicator and get back a full report on its expectancy and profit factor without lifting a finger. most people find one strategy and marry it for life but a real data dog knows that you have to iterate to success or you will get left behind. i am running eighty one different backtests right now because i know that ninety percent of what i find will be trash but that remaining ten percent is where the wealth is made. the backtest architect knows exactly how to structure the folders and data paths so that we are testing everything from the base indicator to complex versions with filters. you might think that popular tools like fibonacci or order blocks are the way to go because everyone on social media talks about them like they are law. but when i actually ran the numbers through the machine the results were embarrassing and most of those strategies just resulted in negative expectancy. it is a dangerous trap to follow the crowd into a trade just because some guru said a certain level was important when the data shows it is a coin flip at best. the dynamic swing indicator was one of the few that actually held its weight during the recent massive testing sessions we ran. it was pulling in profit factors of over thirty seven with annualized returns that look too good to be true until you see the trade list. we combined it with filters like the adx and the money flow index to see if we could refine the signals and the results were absolutely staggering. when you have a system that can run through forty data sets while you are drinking tea you realize that manual trading is a form of self harm. i realized this after spending hundreds of thousands on apps and devs only to find out that i could just learn to build these bots myself live on the internet. the speed of iteration is the only thing that matters in this game because the faster you can fail the faster you can find the one strategy that actually prints. one of the biggest hurdles i faced was thinking that i needed to be a math genius or a senior engineer to automate my trading systems. the truth is that code is the great equalizer because it allows a regular person to compete with massive hedge funds by using the same logic and speed. i decided to learn everything in public because i wanted people to see the process of losing money with liquidations and then finally finding a path to automation. the reality of the market is that it moves in cycles and what worked yesterday will almost certainly fail tomorrow unless you are constantly testing. that is why i built the agents to automatically look through the results folder and rank the top performers based on a composite score. it takes all the emotion out of the process because i am no longer looking for a reason to enter a trade i am just looking at a csv file that tells me the truth. if you are still drawing lines on a chart and hoping for the best you are basically playing a game of chance against a high speed casino. the transition from a manual trader to a systems builder is the single most important pivot you will ever make in your life. it is not about being right or wrong it is about having a positive expectancy that has been proven across thousands of trades and multiple years of history. i had to fix a few errors in the short selling logic where the agents were getting confused between maximum and minimum values for take profit levels. these tiny bugs are the difference between a winning system and a blown account so you have to be willing to dive into the code and refine the machine. but once the system is tuned and the sub agents are running it becomes a beautiful workflow that functions entirely without your input. we are currently moving through the editors picks and the trending indicators one by one because i want to have a database of every single strategy on the platform. being a data dog means you never stop searching for that edge and you never settle for a strategy that just looks okay on a single chart. you have to demand excellence from your code because the market will not give you a single inch of mercy if you are lazy with your research. the ultimate goal is to have fully automated systems trading for you so you can focus on scaling rather than staring at a screen for ten hours a day. i am already up to over eighty backtests in this single session and i plan on hitting hundreds more by the end of the week. once you realize that you can crack the code of any indicator you see on the internet you will never look at a chart the same way again. this is the power of using agents to bridge the gap between a raw idea and a finished trading bot that actually works in the real world. i am done with getting liquidated and i am done with the stress of over trading because the code handles everything with cold precision. the path to success is paved with data and if you are not willing to automate your process you are just waiting for your next liquidation to happen

Moon Dev

26,010 görüntüleme • 4 ay önce