Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

🎨 Native CSS Variables: change one token, update your whole site. Keep design systems tight with Oxygen 6

Oxygen

2,624 subscribers

127,952 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie Bildung Kunst

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.

Simplifying AI

56,255 Aufrufe • vor 12 Tagen

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.

zenith

83,372 Aufrufe • vor 4 Monaten

The Real 3D™ update for the XREAL One Series is officially live! Turn your favorite 2D movies, YouTube clips, games, and even photos into instant 3D with one toggle. 🕶️ How to update your XREAL One or XREAL One Pro: 1️⃣ Connect your XREAL One Series glasses to your laptop or PC. 2️⃣ Visit and update to the latest firmware. 3️⃣ Open your on-screen settings, toggle on Real 3D™, and watch your screen gain a whole new dimension. #XREAL #OneSeries #ARGlasses #Real3D

The Real 3D™ update for the XREAL One Series is officially live! Turn your favorite 2D movies, YouTube clips, games, and even photos into instant 3D with one toggle. 🕶️ How to update your XREAL One or XREAL One Pro: 1️⃣ Connect your XREAL One Series glasses to your laptop or PC. 2️⃣ Visit and update to the latest firmware. 3️⃣ Open your on-screen settings, toggle on Real 3D™, and watch your screen gain a whole new dimension. #XREAL #OneSeries #ARGlasses #Real3D

XREAL 👓

49,588 Aufrufe • vor 6 Monaten

🚨 HiDream-O1-Image drops on fal! 🎨 Unified pixel-level transformer. Raw pixels, text and task cues in one token space 🖼️ Long-text layouts, posters and multilingual copy with stronger alignment ✨ Subject-driven shots that keep faces, outfits and IP reads consistent across new scenes

🚨 HiDream-O1-Image drops on fal! 🎨 Unified pixel-level transformer. Raw pixels, text and task cues in one token space 🖼️ Long-text layouts, posters and multilingual copy with stronger alignment ✨ Subject-driven shots that keep faces, outfits and IP reads consistent across new scenes

fal

17,780 Aufrufe • vor 2 Monaten

Smol tip: /𝚏𝚘𝚛𝚔 is perfect for mid-task side quests. It spawns a subagent that inherits the whole conversation, runs in the background while you keep working on your main quest, and comes back with an update.

Smol tip: /𝚏𝚘𝚛𝚔 is perfect for mid-task side quests. It spawns a subagent that inherits the whole conversation, runs in the background while you keep working on your main quest, and comes back with an update.

Delba

111,897 Aufrufe • vor 17 Tagen

Impeccable 3 natively supports crafting new design with diffusion (e.g. GPT Image 2) in harnesses that support it (e.g. Codex, Gemini w/ nano banana plugin). Impeccable now uses the best mode of operation for net-new vs iterative design: 1) completely new design: diffusion-first, then build w/ best practices for brand or product design (new in 3.0) 2) iterative design (additions/changes): design-system first, discovers your components, reads DESIGN/PRODUCT.md, goes to work. new live mode (new in 3.0) makes it extra convenient. Here's a tutorial documenting the whole workflow (incl. how I made the demo site in the video):

Paul Bakaus

37,577 Aufrufe • vor 2 Monaten

New on Playground: the Builder's Guide is live our dashboard now has a full Guide tab covering: - How to build apps with AI (prompting tips that actually work) - How to tokenize your app on Base with one click - Token launch strategy — build audience first, time your launch, keep shipping - How to claim your swap fees via Bankr Your token earns you 57% of every swap fee, tied to your X account. No wallet setup needed. The playbook: build it, ship it, grow it, tokenize it.

New on Playground: the Builder's Guide is live our dashboard now has a full Guide tab covering: - How to build apps with AI (prompting tips that actually work) - How to tokenize your app on Base with one click - Token launch strategy — build audience first, time your launch, keep shipping - How to claim your swap fees via Bankr Your token earns you 57% of every swap fee, tied to your X account. No wallet setup needed. The playbook: build it, ship it, grow it, tokenize it.

GitLawb

14,632 Aufrufe • vor 2 Monaten

Styling with Tailwind feels like being trapped in a cage. You get some speed at the start, but the moment you want real control you're stuck. Only pure CSS gives you raw power. Change one variable and the border-radius updates everywhere in your UI. That's it. You can't beat that.

Styling with Tailwind feels like being trapped in a cage. You get some speed at the start, but the moment you want real control you're stuck. Only pure CSS gives you raw power. Change one variable and the border-radius updates everywhere in your UI. That's it. You can't beat that.

Kyrylo Silin

48,377 Aufrufe • vor 1 Monat

thedivestudios instagram update #해찬 #HAECHAN What your comfort song says about you. The one you keep on repeat—what kind of person does that make you? 👀 "Roll With Me - HAECHAN NCT You go with the flow. Lowkey and chill."

thedivestudios instagram update #해찬 #HAECHAN What your comfort song says about you. The one you keep on repeat—what kind of person does that make you? 👀 "Roll With Me - HAECHAN NCT You go with the flow. Lowkey and chill."

ؘ ndaa #TASTE

15,500 Aufrufe • vor 3 Monaten

let's talk about Galaxy S23 Ultra One UI 6 Beta2 animation. Here is the video comparison, from which we can find several mistakes. 1. Compared with One UI 5.1, One UI 6 Beta2 gestures are unresponsive. Obviously, 5.1 has started to respond, and 6 beta2 stays in place like a fool. This is the root cause of the slowness you feel. 2. Compared with One UI 5.1, One UI 6 Beta2 animation is very simple, without the effect of wallpaper scaling, it looks very rigid and boring. 3. Compared with One UI 5.1 ，One UI 6 Beta2, there is almost no Gaussian blur effect. This is simply an animation made by elementary school students. It is the lowest-level design of human smartphone animation, and it is a garbage-level work that makes all colleagues laugh. Of course, I think Samsung will definitely change, but he is disgusting now. if beta3 does not change, I will continue to scold.

let's talk about Galaxy S23 Ultra One UI 6 Beta2 animation. Here is the video comparison, from which we can find several mistakes. 1. Compared with One UI 5.1, One UI 6 Beta2 gestures are unresponsive. Obviously, 5.1 has started to respond, and 6 beta2 stays in place like a fool. This is the root cause of the slowness you feel. 2. Compared with One UI 5.1, One UI 6 Beta2 animation is very simple, without the effect of wallpaper scaling, it looks very rigid and boring. 3. Compared with One UI 5.1 ，One UI 6 Beta2, there is almost no Gaussian blur effect. This is simply an animation made by elementary school students. It is the lowest-level design of human smartphone animation, and it is a garbage-level work that makes all colleagues laugh. Of course, I think Samsung will definitely change, but he is disgusting now. if beta3 does not change, I will continue to scold.

Ice Universe

121,005 Aufrufe • vor 2 Jahren

How I build with Claude Fable 5 1. Three.js = rotate and explore any product in 3D in the browser 2. Color swatches = swap a material value to change the model live 3. CSS radial-gradient = premium spotlight glow zero images 4. GSAP ScrollTrigger = scroll turns one screen into a full story 5. Monospace fonts = signal precision and luxury instantly 6. AudioContext = ambient sound toggle in one call Save this

How I build with Claude Fable 5 1. Three.js = rotate and explore any product in 3D in the browser 2. Color swatches = swap a material value to change the model live 3. CSS radial-gradient = premium spotlight glow zero images 4. GSAP ScrollTrigger = scroll turns one screen into a full story 5. Monospace fonts = signal precision and luxury instantly 6. AudioContext = ambient sound toggle in one call Save this

FHILY👑

149,179 Aufrufe • vor 1 Monat

🎨 The Rax Cube Design Contest has come to an end! A huge thank you to everyone who shared their creativity with us. The community delivered some amazing designs. Here are the first 3 winning entries👇 Congratulations to the creators! 🧩 Which one is your favorite? Let us know below! 👀

🎨 The Rax Cube Design Contest has come to an end! A huge thank you to everyone who shared their creativity with us. The community delivered some amazing designs. Here are the first 3 winning entries👇 Congratulations to the creators! 🧩 Which one is your favorite? Let us know below! 👀

RAX Finance

11,225 Aufrufe • vor 12 Tagen

🔵 Let’s put a face to your profile! Exciting news! 🎉 We’ve just rolled out another update for your account profile! You can now choose your profile pic from a selection of our newly created avatars, featuring gradients in your favorite colors! 🌈 And guess what? The avatar list will keep getting longer! Stay tuned! Update your profile here ➡️ But that’s not all! Till this Friday (September 6th), screenshot your updated username and profile pic, reply with it in this post replies, and get a chance to win 5 JMPT! Let’s start this Autumn season colorful! 🍁🎨

JumpTask

61,735 Aufrufe • vor 1 Jahr

1/ ZOOM INTO YOUR VIBIES 🔍✨ New site update: You can now zoom into your GVC PFPs like never before! Here’s how: 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select a vibie 5. Zoom in, zoom out, and explore every detail! You can also fine-tune the zoom settings and download your high-res vibie - all in one spot 🎨🤙 Details matter. Flex your zoom-ins below! 👀

1/ ZOOM INTO YOUR VIBIES 🔍✨ New site update: You can now zoom into your GVC PFPs like never before! Here’s how: 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select a vibie 5. Zoom in, zoom out, and explore every detail! You can also fine-tune the zoom settings and download your high-res vibie - all in one spot 🎨🤙 Details matter. Flex your zoom-ins below! 👀

Good Vibes Club 🤙

30,485 Aufrufe • vor 1 Jahr

> be Kimi Founder > Zhilin Yang. nobody in the West knows your name. > build K1. K2. K2.5. K2.6. K2.7. > each one sets the open-source record > everyone says China can't reach the frontier > raise $2B. hit $20B valuation. > keep your head down. keep shipping. > July 16. drop K3. > 2.8 trillion parameters. > the biggest open model ever released. > 1 million token context. native multimodal. > Kimi Delta Attention — 6.3x faster decoding. > Artificial Analysis ranks it #4 overall. > right behind GPT-5.6 Sol and Fable 5. > open weights July 27. free for anyone. > the closed labs charge for the frontier. > you gave it away. > different game.

> be Kimi Founder > Zhilin Yang. nobody in the West knows your name. > build K1. K2. K2.5. K2.6. K2.7. > each one sets the open-source record > everyone says China can't reach the frontier > raise $2B. hit $20B valuation. > keep your head down. keep shipping. > July 16. drop K3. > 2.8 trillion parameters. > the biggest open model ever released. > 1 million token context. native multimodal. > Kimi Delta Attention — 6.3x faster decoding. > Artificial Analysis ranks it #4 overall. > right behind GPT-5.6 Sol and Fable 5. > open weights July 27. free for anyone. > the closed labs charge for the frontier. > you gave it away. > different game.

Kirill

410,858 Aufrufe • vor 5 Tagen

A SOLO CREATOR JUST SHIPPED A $35,000-TIER ANIMATED SITE IN ONE WEEKEND - WITH CLAUDE CODE + HIGGSFIELD, FOR THE COST OF A SUBSCRIPTION. What you're looking at isn't a template. It's a fully animated, scroll-driven site, generated end to end in a single agentic session. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - not a single hand-coded keyframe → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question keeps surfacing: a person didn't build this by hand… did they? For studios billing $100-149/hr, that question lands like a verdict. What this normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between all three → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part the agency won't put in its pitch deck. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → one session One operator now runs all six systems in a single pass and ships a working site - without opening a frame extractor or writing one CSS keyframe. Full breakdown of how it's built in the article below. Save it & read today 👇

A SOLO CREATOR JUST SHIPPED A $35,000-TIER ANIMATED SITE IN ONE WEEKEND - WITH CLAUDE CODE + HIGGSFIELD, FOR THE COST OF A SUBSCRIPTION. What you're looking at isn't a template. It's a fully animated, scroll-driven site, generated end to end in a single agentic session. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - not a single hand-coded keyframe → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question keeps surfacing: a person didn't build this by hand… did they? For studios billing $100-149/hr, that question lands like a verdict. What this normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between all three → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part the agency won't put in its pitch deck. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → one session One operator now runs all six systems in a single pass and ships a working site - without opening a frame extractor or writing one CSS keyframe. Full breakdown of how it's built in the article below. Save it & read today 👇

ZEUS⚡️

21,598 Aufrufe • vor 1 Monat

MiaoYan is a lightweight, native macOS Markdown editor for writing and notes — one of my open-source macOS projects. It just shipped its biggest update to date, introducing Split View for side-by-side Markdown editing and live preview, with smooth bidirectional scroll sync. This release also brings a full visual refinement, layout cycling between sidebar, list, and focus modes, faster startup with native window animations, and broad performance improvements across editing, preview, and export. Built entirely in Swift, not Electron. MiaoYan is local-first, requires no account, collects no telemetry, and avoids AI features by design. I built it for clean Markdown, performance, and a calm writing environment.

MiaoYan is a lightweight, native macOS Markdown editor for writing and notes — one of my open-source macOS projects. It just shipped its biggest update to date, introducing Split View for side-by-side Markdown editing and live preview, with smooth bidirectional scroll sync. This release also brings a full visual refinement, layout cycling between sidebar, list, and focus modes, faster startup with native window animations, and broad performance improvements across editing, preview, and export. Built entirely in Swift, not Electron. MiaoYan is local-first, requires no account, collects no telemetry, and avoids AI features by design. I built it for clean Markdown, performance, and a calm writing environment.

Tw93

34,484 Aufrufe • vor 6 Monaten

I created a dance movement sheet by using a reference image to animate every 16 panels from the reference image I provided. GPT Image 2 + See Dance 2.0 on Yapper Tutorial Below Prompt Here’s every step with the text under each heading: 1. Basic Stance Stand with your feet shoulder-width apart. Relax your knees. Keep your upper body relaxed. Get ready. 2. Step to the Right Step to the right. Move your body in the direction of the step. Keep your knees soft. Keep your gaze forward. 3. Step to the Left Step to the left. Move your body in the direction of the step. Keep your knees soft. Return to the starting position. 4. Two Steps Take two steps in sequence. Step to the right first. Then step to the left. Connect smoothly. 5. Body Wave Start the wave from your chest. Move through your ribs and hips. Finish with your lower body. Make the motion smooth like a wave. 6. Hip Sway Move your hips side to side. Shift your weight with the motion. Use your body naturally. Keep your upper body relaxed. 7. Arm Swing Swing your arms wide. Step to beat with your feet. Coordinate your arms and steps. Return your arms to center. 8. Turn Preparation Prepare for a turn in place. Cross one foot over the other. Use your core to maintain balance. Spot in the direction of the turn. 9. Right Turn Turn to the right. Keep your core engaged. Pivot on the ball of your foot. Spot forward after the turn. 10. Left Turn Turn to the left. Keep your core engaged. Pivot quickly. Keep your posture upright. 11. Jump Up Bend your knees and jump up. Reach your arms overhead. Land softly on your feet. Connect to the next move. 12. Kick Pose Kick your leg forward. Keep your supporting leg stable. Engage your core for balance. Control your landing. 13. Side Lunge Step wide to one side. Bend one knee and lower your body. Keep the other leg straight. Show the direction of your strength. 14. Freeze Pose Hit a strong pose on the beat. Freeze your body momentarily. Create a powerful shape. Show your presence. 15. Finishing Pose Finish the dance gracefully. Keep your balance. Show your confidence. End with a clean, sharp pose. 16. Whole Flow Connect from the basic stance to the finishing pose. The steps, waves, and turns flow naturally together. Express your own style.

I created a dance movement sheet by using a reference image to animate every 16 panels from the reference image I provided. GPT Image 2 + See Dance 2.0 on Yapper Tutorial Below Prompt Here’s every step with the text under each heading: 1. Basic Stance Stand with your feet shoulder-width apart. Relax your knees. Keep your upper body relaxed. Get ready. 2. Step to the Right Step to the right. Move your body in the direction of the step. Keep your knees soft. Keep your gaze forward. 3. Step to the Left Step to the left. Move your body in the direction of the step. Keep your knees soft. Return to the starting position. 4. Two Steps Take two steps in sequence. Step to the right first. Then step to the left. Connect smoothly. 5. Body Wave Start the wave from your chest. Move through your ribs and hips. Finish with your lower body. Make the motion smooth like a wave. 6. Hip Sway Move your hips side to side. Shift your weight with the motion. Use your body naturally. Keep your upper body relaxed. 7. Arm Swing Swing your arms wide. Step to beat with your feet. Coordinate your arms and steps. Return your arms to center. 8. Turn Preparation Prepare for a turn in place. Cross one foot over the other. Use your core to maintain balance. Spot in the direction of the turn. 9. Right Turn Turn to the right. Keep your core engaged. Pivot on the ball of your foot. Spot forward after the turn. 10. Left Turn Turn to the left. Keep your core engaged. Pivot quickly. Keep your posture upright. 11. Jump Up Bend your knees and jump up. Reach your arms overhead. Land softly on your feet. Connect to the next move. 12. Kick Pose Kick your leg forward. Keep your supporting leg stable. Engage your core for balance. Control your landing. 13. Side Lunge Step wide to one side. Bend one knee and lower your body. Keep the other leg straight. Show the direction of your strength. 14. Freeze Pose Hit a strong pose on the beat. Freeze your body momentarily. Create a powerful shape. Show your presence. 15. Finishing Pose Finish the dance gracefully. Keep your balance. Show your confidence. End with a clean, sharp pose. 16. Whole Flow Connect from the basic stance to the finishing pose. The steps, waves, and turns flow naturally together. Express your own style.

Sharon Riley

54,571 Aufrufe • vor 2 Monaten

A CHINESE GUY STOPPED PAYING WEB DESIGNERS $1,800 PER LANDING PAGE AND BUILT THE SAME KIND OF SITE WITH CLAUDE CODE IN ONE AFTERNOON FOR LESS THAN $70 claude was not just writing code. it was doing the job of a designer, copywriter and frontend dev in one window. in 4 hours, one rough idea turned into the layout, color system, font choices, page sections and the full html/css/js build the real trick was the references. he gave claude 5 screenshots, made it ask 7 questions first, then pushed it toward one clear visual direction instead of accepting another generic ai-looking template the first version already looked solid. the second pass made it feel expensive: better typography, a darker palette, mobile cleanup, cursor effects, 6 micro-interactions and custom hero visuals his old workflow was burning $1,200 on design, $500 on frontend work and another $150 on small fixes every time he needed a new page. now the whole test costs less than $70 and the site still looks like something a $5,000 agency would ship the edge is not “ai builds websites.” the edge is that one person can now brief, critique, polish and launch in one afternoon without waiting 10 days for a designer to send version one

A CHINESE GUY STOPPED PAYING WEB DESIGNERS $1,800 PER LANDING PAGE AND BUILT THE SAME KIND OF SITE WITH CLAUDE CODE IN ONE AFTERNOON FOR LESS THAN $70 claude was not just writing code. it was doing the job of a designer, copywriter and frontend dev in one window. in 4 hours, one rough idea turned into the layout, color system, font choices, page sections and the full html/css/js build the real trick was the references. he gave claude 5 screenshots, made it ask 7 questions first, then pushed it toward one clear visual direction instead of accepting another generic ai-looking template the first version already looked solid. the second pass made it feel expensive: better typography, a darker palette, mobile cleanup, cursor effects, 6 micro-interactions and custom hero visuals his old workflow was burning $1,200 on design, $500 on frontend work and another $150 on small fixes every time he needed a new page. now the whole test costs less than $70 and the site still looks like something a $5,000 agency would ship the edge is not “ai builds websites.” the edge is that one person can now brief, critique, polish and launch in one afternoon without waiting 10 days for a designer to send version one

Gipp 🦅

295,173 Aufrufe • vor 1 Monat

You can now secure your HYPE (Hyperliquid’s native token) and other HyperEVM ecosystem tokens directly in Ledger Wallet! With Ledger + Ledger Wallet, you can: → Send & receive HYPE → Swap securely in-app Hyperliquid is one of the fastest-growing L1 blockchains in crypto, with billions in weekly trading volume and over $5B in TVL - and HyperEVM, its Ethereum-compatible smart contract layer, is powering the next wave of on-chain DeFi innovation. Now you can access it all securely and seamlessly with Ledger Wallet. 🔒

You can now secure your HYPE (Hyperliquid’s native token) and other HyperEVM ecosystem tokens directly in Ledger Wallet! With Ledger + Ledger Wallet, you can: → Send & receive HYPE → Swap securely in-app Hyperliquid is one of the fastest-growing L1 blockchains in crypto, with billions in weekly trading volume and over $5B in TVL - and HyperEVM, its Ethereum-compatible smart contract layer, is powering the next wave of on-chain DeFi innovation. Now you can access it all securely and seamlessly with Ledger Wallet. 🔒

Ledger

107,496 Aufrufe • vor 8 Monaten