Frontend + AI Engineer
Building AI Γ Music Γ Web3 in public (0β1M '26)
Daily: React tips, AI hacks, blockchain royalties, creative AI, startups
#AI#Web3#Mus
This is a goldmine for anyone building websites with AI π
Jiro makes creating stunning, animated web experiences effortless with AI tools.
Check it out β https://t.co/8yqOGQgCZU
5 component libraries for making your next UI feel more polished. Save these β
- https://t.co/6ifb6dlSfD
- https://t.co/nawpDXvNQj
- https://t.co/r8Ilu6NFvF
- https://t.co/jhMi7GHYPG
- https://t.co/W7F98oVhgs
Which component library should I add next?
If you want to feel what itβs like to have a personal agent platform created by @AnthropicAI go to the Claude app right now and create a new Claude Code Project, name it Tony or something.
Use this prompt. βthis project is responsible for moving my life forward, you are to help me get things done in order of how important they are. Analyze all my connections including email, slack, and any platform and suggest threads and automations that we can set up now. One of your threads should be called the Organizer, which does the prioritizing and planning, which keeps an up to date editable document of our todo lists and important documents.β
Projects is very good at delegating. Thatβs what it was made for. Thereβs a coordinator chat, and then threads (sub agents). Whatβs cool, is these sub agents can be cloud or local. And since I have my MacBook and 2 Mac minis running 24/7 some of the threads run there. But the coordinator thread is in the cloud so itβs always available.
Your coordinator thread can be Opus 5.5, but threads can run different models. Just ask for haiku or sonnet if they are responsible for very routine tasks.
opus 5.5 doing motion design. 0 keyframes.
this 15-second video builds an entire motion system from one orange dot
toggle β typography β spring graph β shape morph β kinetic type β halftone β end card
here's the prompt to recreate it β
<inputs>
Ask me for: a short label for the first toggle, one main word, a percentage for the graph, text for the final card, one accent color and a track with a clear beat.
</inputs>
<direction>
A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold type and one vivid orange accent. The orange dot links every scene: it begins in the UI, becomes the dot above a letter, draws a spring graph, expands into a shape and reappears on the end card. A cursor makes the opening click feel real. Keep the movement crisp and controlled, with subtle spring overshoots and no empty pauses.
Banned: stock footage, gradients, glows, particle bursts, arbitrary transitions and movement that doesn't grow from something already on screen.
</direction>
<structure>
Around 15 seconds, with a visual change on every major beat.
Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and shift into place until only "Motion" remains, with the orange dot above the "i".
Spring: the dot leaps away from the word and lands on a graph. Its trajectory draws a spring response, passes the target and settles next to a "+22%" callout.
Shape: the dot races along a line, expands into an orange circle and fills the frame. A black rounded square rotates inside it, then extends into a pill. Everything contracts into one orange dot on black.
Type: words including "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" circle the dot. The ring of words spreads into a field of tiny dots.
Reveal: the halftone field expands and turns black, uncovering the final card: "Opus 5.5", "Motion designer." and "0 keyframes".
Return: the orange dot travels back through the halftone, graph and toggle. Make the last frame match the first for a seamless loop.
</structure>
<build>
1. Use one HTML file, 1920x1080 at 60fps. Calculate every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form springs for the toggle, moving dot and graph. Draw the graph with the same spring function that controls the dot.
3. Move the letters individually as "Reduce Motion" becomes "Motion". Keep the orange dot above the "i" until it jumps away.
4. Treat the orange circle, rotating square and pill as states of one shape. Carry its position and momentum through each change.
5. Arrange the words on a circular path, then send their letters outward to transition into the halftone grid.
6. Draw the halftone as a dot grid whose sizes react to the orange dot. Expand it beyond the frame before showing the end card.
7. Align the click, dot landing, graph peak, shape changes and final title with measured beats. Render one frame per beat to check timing before the full export.
</build>
<gotchas>
The graph and dot must share the same motion or the spring will look wrong. Use the same orange accent throughout. Time outgoing and incoming text separately so letters never overlap. When a shape fills the screen, extend it beyond all four corners. Match the cursor, dot and typography in the opening and closing frames to prevent a loop stutter.
</gotchas>
<start>
Ask me for the inputs, then show me the beat map and four stills (toggle, graph, kinetic type, end card) before building the full video.
</start>
Your UI looks good, but feels a little too static? π
6 sites for animated icons:
β https://t.co/Wy6zw0SD7q
β https://t.co/FCnSqX5T7N
β https://t.co/XnBH1OABHa
β https://t.co/MoGTG24SAn
β https://t.co/0YiNKmY2lS
β https://t.co/OESxdb75Zu
Small animations. Big difference.
Iβm in love with this sentence:
βA person's capacity for growth is directly linked to how much truth they can handle about themselves without running away.β
If you're a designer, bookmark this.
1. https://t.co/RlChWqggj8 - 600+ design Prompts with full source code for 3D and scroll-driven sites
2. https://t.co/75zV2ioDNu - navbar inspiration
3. https://t.co/XPn2VgZBdJ - better footers
4. https://t.co/NDaj9DThhe - CTA inspiration
5. https://t.co/bhB2GfGIix - Real product design styles
6. https://t.co/TXT88wdEv5 - Hero sections worth stealing
7. https://t.co/BfrrSJOQVY - 3D icons for modern interfaces
8. https://t.co/cP8YFdb7cr - Glass UI components and effects
What did I miss?
We just let in every Pro and Max user from the Claude Code Projects waitlist!
If you're new to Claude Code Projects, here's a 4 minute walkthrough to get you started:
The final level of intelligence is selective ignorance, not constant awareness.
Most situations donβt deserve analysis. They deserve indifference and silence.