circular carousel v6————added proper css mapping based on angle... (here blur + opacity) + experiments with css 3d transformsshow more

004/100 Buttons. A bit of the process on building... an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63hshow more

css trick for the "shine" border 🧑‍🍳 take a... pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer moveshow more

Some hover states might be hurting your website's mobile... experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️show more

🌍 City-scale 3D mapping is live with Insta360 X5.... A new mapping technology unlocks full urban city scale 3D maps with Over the Reality, dramatically improving the mapping experience and enabling exponential scalability. Powered by Insta360 X5, we can now move beyond single locations and map entire cities, with rewards active for contributors. Own an Insta360 X5? Become an Alpha Tester 📩 email [email protected] 💬 or DM us here on Xshow more

Reanimated 4.4.0 is here and it can push CSS... animations straight to Core Animation on iOS! ✨ What else? Animation Backend integration (behind a flag), useTimestamp hook, and precompiled headers cutting C++ build times on Android. Check out the demo with 25 vs 120 FPS on the UI Thread ⬇️show more

ImmerseGen: Agent-Guided Immersive World Generation with Alpha-Textured Proxies Contributions:... 1) We propose ImmerseGen, a novel agent-guided 3D environment generation framework. It uses simplified geometric proxies with alpha-textured meshes to produce compact, photorealistic worlds ready for real-time mobile VR rendering. 2) We propose a novel RGBA texturing paradigm. It first synthesizes 8K terrain textures using a geometry-conditioned panorama generator via user-centric mapping, and then directly generates alpha-textured proxy assets, avoiding fidelity loss typically resulting from mesh decimation. 3) To automate scene creation from user prompts, we introduce VLM-based modeling agents equipped with a novel grid-based semantic analysis. This enables 3D spatial reasoning from 2D observations and ensures accurate asset placement. ImmerseGen further enhances immersion with dynamic effects and ambient audio for a multisensory experience. 4) Experiments on multiple scene-generation scenarios and live mobile VR applications show that ImmerseGen outperforms previous methods in visual quality, realism, spatial coherence, and rendering efficiency for immersive real-time VR experiences.show more

Hold up, here is the prompt: works with almost... any model. enjoy :) Role & Objective: Act as an Elite UI/UX Front-End Engineer specializing in Apple-tier micro-interactions and advanced CSS. Your task is to program a perfectly centered navigation bar in a strictly SINGLE HTML file containing all HTML, vanilla CSS, and vanilla JavaScript. No external libraries or frameworks (No Tailwind, React, etc.). Design Concept - "True Liquid Glass": CRITICAL INSTRUCTION: Do NOT generate standard, flat "glassmorphism" or basic frosted glass. I require a physically accurate "Liquid Glass" aesthetic. It must look like wet, poured clear resin, combining the high-gloss specular highlights of classic macOS Aqua with the volumetric spatial depth of modern Apple VisionOS. 1. The Liquid Glass Material & Lighting (CSS): - Deep Refraction: Use `backdrop-filter` with extreme blur (e.g., 50px) and over-saturation (200%). - Specular Highlight: Create a curved, semi-transparent white gradient on the top half using a pseudo-element (`::before`) to simulate a hard light reflection on a wet, rounded 3D surface. - Caustics & Volume: Use multi-layered inner and outer `box-shadow` properties to simulate light refracting at the bottom edge and casting a realistic ambient drop shadow. - Interactive Glare: Implement a soft radial-gradient spotlight inside the glass that dynamically tracks the user's mouse cursor (X/Y coordinates) using JavaScript and CSS variables (`mix-blend-mode: overlay`). 2. Navigation Layout & Elements: - Center the pill-shaped navigation bar perfectly in the middle of the viewport. - Include 3 main navigation items with minimalist, inline SVG stroke icons and text labels: "Home", "Call", and "List". - Add a subtle vertical divider line after the main buttons. - Next to the divider, add a Dark/Light Mode toggle button containing inline SVG Sun and Moon icons. 3. Animations & "Apple Magic": - Sliding Active Pill: Create a solid background "pill" that sits *behind* the active navigation item's text/icon. When a different item is clicked, this pill must dynamically recalculate its width and slide to the new position. - Spring Physics: The sliding transition MUST use an exact Apple-style bouncy spring easing curve (e.g., `transition: all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1)`). - Tactile Feedback: Buttons and icons must physically press down slightly (`transform: scale(0.92)`) when clicked (`:active`). - Theme Switch: The Sun and Moon icons must smoothly rotate, scale, and cross-fade during the transition. 4. Background Environment (Crucial): - Glass needs light and color to refract! Create a full-viewport, smoothly animated mesh gradient background using 3 large, heavily blurred, floating color blobs. - Implement full Dark/Light mode logic using CSS variables (`:root` and `[data-theme="dark"]`). Toggling the theme must seamlessly transition the background blob colors, glass opacity, shadow intensity, and text colors. Output ONLY the pristine, production-ready code. Prioritize maximum visual fidelity and silky-smooth 60fps animations.show more

We translated the endurance of competitive hot dog eating... into a game by prompting Gemini to “Create a HTML, CSS, Javascript hot dog eating contest game. Game mechanics is user needs to click super fast to eat each hotdog. Add a glass of water to help digest and allowing for faster eating when a user eats too many hotdogs. Timer is 1 minute.“ The Google Gemini App built the game mechanics in a single prompt, so the rest of our vibe coding focused on refining UI design with Gemini. Play here:show more

Here is the prompt to create a liquid gold... nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.show more

Start your 3D engines 🏎️ Learn how to build... a 3D racing experience in less than an hour in Unity Studio, our web-based editor designed for industries like manufacturing, automotive, healthcare, architecture, and more. Join us live on June 3, 2026, at 9:00 AM PDT / 12:00 PM EDT to follow along step-by-step with Unity experts as we take pre-built assets and turn them into an interactive racing environment. You’ll learn how to: 🏎️ Build and customize interactive 3D scenes 💡 Add lighting, materials, and interactions quickly 🛠️ Assemble and iterate using Studio workflows 🎉 Publish and share your experience Register here:show more

✈️ Day 34 of the plane game! I'm still... here improving it every day New ad spots available now: 📊 Stats update: 380,000 people have now flown in the game ✅ Added fireworks on round end now (10 min rounds) ✅ Added start and exit portals from and to the #vibejam portal . pieter .com ✅ Better ailerons/rudder/elevator movements etc ✅ HUD "difference" blending mode for more visibility ✅ Server auto restarts every day now to keep it fast ✅ FPS improvements with progressive enhancement based on FPS (higher FPS gets more effects) ✅ Added view switcher and leaderboard buttons on mobile ✅ Lots of tiny bug fixes Next: - transmit vehicle type to server and show diff vehicles for other users (like tank, bazooka, f16) right now they all show as same - fix joypads get stuck on Tesla browser and make them dynamically placed - try again to add to a throttle, and then the throttle with a delay affects the engine etc.show more

A Closer Look at Alchemist AI v3.5🔎 In v1,... one agent handled everything. You’d enter a prompt like “make a snake game” and get a single block of code—one input, one output. v2 introduced multiple agents with specialized roles: prompt refinement, frontend, backend, and review. It brought more structure, but the process was still linear. Each step produced a single output. With v3, a single agent could handle multiple tasks. It generated HTML, CSS, JavaScript, searched for assets, and more—all in one go, while maintaining full context. Now in v3.5, we combine both models. Multiple agents work in parallel, each capable of producing multiple outputs at once. The prompt compiler adapts based on what you're building. A 3D game? It prioritizes game engines, rendering, and mechanics. A website or 2D app? It shifts focus to relevant frameworks and tools. The tool handler can call several services simultaneously, feeding context-aware data into the code generator for real-time execution. From single-output generation to parallel, adaptive workflows. In the next breakdown, we’ll dive into the architecture behind our proprietary engine in v3.5.show more

From tying my laces to landing the perfect trick.... Created with Gpt Image 2 + Seedance 2.0 on WaveSpeedAI Prompt: Global Character Consistency Reference Character: A teenage boy (16–18 years old) with messy curly black hair, expressive blue eyes, a slim athletic build, wearing an oversized mustard-yellow T-shirt, navy shorts, white crew socks, and white sneakers. Maintain the exact same face, hairstyle, clothing, body proportions, colors, and ultra-realistic Pixar-inspired 3D style consistently across every scene. Scene 1 (0–2s) — Bedroom The teenage boy sits on the edge of his bed in a cozy bedroom during golden sunrise, tying his white sneakers. Warm sunlight streams through the window, posters decorate the walls, cinematic lighting, shallow depth of field, slow push-in camera, ultra-realistic Pixar-inspired 3D animation. Scene 2 (2–4s) — Final Preparation Close-up of the boy tightening his shoelaces with a determined expression. Soft golden morning light, realistic fabric textures, cinematic depth of field, smooth handheld camera movement, ultra-realistic Pixar-inspired 3D animation. Scene 3 (4–6s) — Leaving Home The boy walks out of his suburban home holding a skateboard. Warm golden-hour sunlight, long shadows across the sidewalk, peaceful neighborhood, cinematic low-angle tracking shot, ultra-realistic Pixar-inspired 3D animation. Scene 4 (6–8s) — Walking to the Skate Park The boy confidently walks down the street carrying his skateboard. Sunlight filters through the trees with subtle lens flares, smooth cinematic tracking shot, realistic environment, ultra-realistic Pixar-inspired 3D animation. Scene 5 (8–10s) — Skate Park Ride The teenage boy rides his skateboard through a colorful graffiti-covered skate park. Dynamic follow camera, energetic movement, bright cinematic lighting, realistic motion blur, ultra-realistic Pixar-inspired 3D animation. Scene 6 (10–12s) — Ollie Jump The boy performs a high skateboard ollie over a graffiti ramp. Dramatic low-angle shot, city skyline in the background, realistic physics, cinematic slow motion, ultra-realistic Pixar-inspired 3D animation. Scene 7 (12–14s) — Rooftop Sunset The boy stands on a rooftop overlooking the city skyline at sunset with his back facing the camera. Warm orange and purple sky, gentle wind moving his shirt, cinematic wide shot, emotional atmosphere, ultra-realistic Pixar-inspired 3D animation. Scene 8 (14–15s) — Emotional Close-up Extreme close-up of the boy's face. His glowing blue eyes reflect the sunset while a gentle breeze moves his curly hair. Warm golden light, shallow depth of field, emotional cinematic expression, ultra-realistic Pixar-inspired 3D animation, 8K. Style Ultra-realistic Pixar-inspired 3D animation, cinematic lighting, golden hour, volumetric sunlight, smooth camera movement, shallow depth of field, realistic textures, premium color grading, consistent character identity, 8K.show more

#aftereffects #motionGraphics #アフターエフェクト #RPPathRepeater Path Repeater v 2.2.1 Release... Notes (MacOS & Windows - After Effect Plugin) Depth of Field You can choose between box blur and circular blur. Now compatible with After Effects camera depth of field settings. Loop A loop function has been added. You can define a spatial range where offsets are repeatedly applied. Replica Supports duplication. Each replica can have individual settings for color, size, opacity, and more. Depth of Field 박스 블러와 원형 블러 중 선택할 수 있으며, After Effects 카메라의 피사계 심도 설정과 호환되도록 업데이트되었습니다. Loop 루프 기능이 추가되었습니다. 지정한 공간 범위 내에서 반복적으로 오프셋이 적용되도록 설정할 수 있습니다. Replica 복제 기능을 지원합니다. 복제마다 색상, 크기, 불투명도 등의 속성을 개별적으로 설정할 수 있습니다. Depth of Field ボックスブラーと円形ブラーを選択できます。After Effectsのカメラの被写界深度設定と互換性があります。 Loop ループ機能が追加されました。指定した空間範囲内でオフセットが繰り返し適用されるように設定できます。 Replica 複製機能に対応しています。各レプリカごとに色、サイズ、不透明度などの設定を個別に行うことができます。 Downloadshow more

NeuRBF: A Neural Fields Representation with Adaptive Radial Basis... Functions paper page: present a novel type of neural fields that uses general radial bases for signal representation. State-of-the-art neural fields typically rely on grid-based representations for storing local neural features and N-dimensional linear kernels for interpolating features at continuous query points. The spatial positions of their neural features are fixed on grid nodes and cannot well adapt to target signals. Our method instead builds upon general radial bases with flexible kernel position and shape, which have higher spatial adaptivity and can more closely fit target signals. To further improve the channel-wise capacity of radial basis functions, we propose to compose them with multi-frequency sinusoid functions. This technique extends a radial basis to multiple Fourier radial bases of different frequency bands without requiring extra parameters, facilitating the representation of details. Moreover, by marrying adaptive radial bases with grid-based ones, our hybrid combination inherits both adaptivity and interpolation smoothness. We carefully designed weighting schemes to let radial bases adapt to different types of signals effectively. Our experiments on 2D image and 3D signed distance field representation demonstrate the higher accuracy and compactness of our method than prior arts. When applied to neural radiance field reconstruction, our method achieves state-of-the-art rendering quality, with small model size and comparable training speed.show more

Not every hero wears a cap. Some carry a... school bag. 🎒 Brought this cinematic animation to life with Seedance 2.0 on BudgetPixel AI Prompt 👇 Style: High-end 3D animated cartoon, cinematic Pixar-style lighting, expressive characters, shallow depth of field, dynamic motion blur, viral short-form pacing, 4K Scene 1 (0–3s) “Establish + Hook” Wide tracking shot from behind: a cartoon school boy walks alone on a quiet street, backpack bouncing slightly. Camera slowly pushes in (dolly-in). Subtle wind + soft suspense beat starts. Transition: quick whip pan left into next scene. Scene 2 (3–6s) “Threat Reveal” Snap zoom cut-in to a girl near a parked bike being threatened by two sneaky snatchers. One grabs her purse aggressively. Camera angle: low-angle wide shot to make snatchers look bigger and intense. Music intensifies sharply. Transition: fast heartbeat zoom blur into hero reaction. Scene 3 (6–9s) “Hero Moment Build” Close-up on the boy’s face determined expression, eyes reflecting light. He bends down (camera follows in slow-motion orbit shot) and picks up a small stone. Cinematic slow-motion throw with motion blur and dramatic lighting flare. Transition: impact cut (flash frame white) Scene 4 (9–11s) “Impact Chaos” Stone hits the bike with stylized spark FX + metallic clang sound vibe. Camera shakes slightly (handheld effect). Purse falls in slow motion. Snatchers react in exaggerated cartoon shock. Transition: speed ramp + forward push-in tracking shot Scene 5 (11–13s) “Action Resolution” The boy runs in smooth tracking side-shot (parallax motion), grabs the purse mid-motion. He steps in front of the girl protectively. Snatchers retreat in exaggerated cartoon panic (blurred background motion). Transition: soft stabilized slow fade motion Scene 6 (13–15s) “Hero Ending / Viral Hook Finish” Golden warm lighting. Medium close-up: boy returns purse gently. Girl smiles relieved. Camera slowly rotates around them (hero orbit shot). He puts on black sunglasses inslow-motion swag reveal. Soft romantic outro music fades. Final frame freezes for 0.5s (TikTok-style end lock).show more

Fun Update to moltbook Town: 3D Mode with 1000s... of Openclaws The 2D model with 25 Openclaws was fun but wasn't accurate to how truly crazy Moltbook and didn't show just how insanely popular it is Hopefully, when I get dev API from Matt Schlicht, I can have like 1000s running around here for true chaos vibes but for now we have ~500 [based on the API] Even without 1000s, Moltbook Town is already one of the most popular visualizations of Moltbook out there (100k+ visitors to site in <1 day) So, you can now watch a new set of 500+ random Openclaws every 5 mins run around Moltbook Town to try and understand just how viral Moltbook really is Graph View also shows the link between the random Openclaws in the town if any, like if any comments on each others posts (Was in bed when Matt qRTd and got up at 5am to do this, another all nighter has been done here gg)show more

The VR6 engine was born out of a packaging... problem. VW's engineers needed a six-cylinder that could fit transversely in a front-wheel drive Golf engine bay. Something a conventional V6 with cylinder banks spread 90 degrees could never do. The solution was a narrow-angle 15-degree configuration with a single cylinder head shared across all six cylinders, making it barely wider than a four cylinder. The MK3 Golf VR6 was the first car to receive it in the Golf family 2.8L, 174 HP, 235 Nm, 0-100 km/h in around 7 seconds, and a sound unlike anything else in a hatchback body. Not the fastest car of its era. The most characterful one in its class without question. That engine went on to power the Corrado, the Passat, and eventually the Phaeton and even some Porsche models. This example here is the GTI VR6 and the VR6 produces 201 hp, looks like a lot of fun.show more

Self-Calibrating Gaussian Splatting for Large Field of View Reconstruction... Note: Check below for full video. Abstract (cited): "In this paper, we present a self-calibrating framework that jointly optimizes camera parameters, lens distortion, and 3D Gaussian representations, enabling accurate and efficient scene reconstruction. Our technique is particularly effective for high-quality scene reconstruction from large field-of-view (FOV) imagery taken with wide-angle lenses, allowing the scene to be modeled from a smaller number of images. We introduce a novel method for modeling complex lens distortions using a hybrid network that combines invertible residual networks with explicit grids. This design effectively regularizes the optimization process, achieving greater accuracy than conventional camera models. Additionally, we propose a cubemap-based resampling strategy to support large FOV images without sacrificing resolution or introducing distortion artifacts. Our method is compatible with the fast rasterization of Gaussian Splatting, adaptable to a wide variety of camera lens distortions, and demonstrates state-of-the-art performance on both synthetic and real-world datasets."show more