Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

tab choreography • pill peeks toward whatever icon you hover • icons subtly scale on press • label drifts in with a touch of blur as the pill arrives • only dividers in the pills flight path hide • optically balanced when active vs inactive dialkit ftw

95,155 Aufrufe • vor 3 Monaten •via X (Twitter)

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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.

Leon Lin

128,501 Aufrufe • vor 5 Monaten

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.

Leon Lin

72,887 Aufrufe • vor 5 Monaten

Started using React Native two days ago and immediately fell down a tab-bar rabbit hole. I’d seen Instagram and Revolut collapse their tab bars on scroll while keeping every icon visible. I wanted that without giving up real iOS Liquid Glass. Turns out iOS 26’s public API can’t express that state. UITabBarMinimizeBehavior is an enum of when, not what. With onScrollDown, UIKit minimizes the bar to the active tab alone. There’s no parameter controlling what survives. So most implementations rebuild the visible bar as a custom component. Some use genuine glass materials, but the real UITabBar is gone and with it, the native selection capsule: that little blob that moves like a drop of water between tabs. You can reproduce it with separate springs on the leading and trailing edges. I didn’t want a reproduction. I wanted UIKit’s. Then I remembered a Flutter app i built some months back which uses cupertino_native. Flutter runs the app while a platform-view bridge renders a real UIKit UITabBar. Finding expo-glass-tabs clarified the compact geometry I wanted. The two ideas clicked: why not bridge a real UITabBar into React Native? Here’s the trick: a standalone UITabBar has no UITabBarController managing it, so Apple’s minimization rule never applies. That means I can control its frame and items myself. Expo Router still owns navigation and screen lifecycle. React Native detects scroll direction. Swift removes and restores the real item labels, recentres the icons and animates the native bar’s size. All five icons remain visible. The result keeps Apple’s Liquid Glass, water-drop capsule, hit testing and accessibility, while adding a compact state its public API doesn’t provide. One gotcha tho: detaching the bar means reimplementing everything the controller previously gave you for free. Active-tab reselect scrolling was one example

kelvin.dart

67,945 Aufrufe • vor 14 Tagen

There is a keyhole in Rome that lets you see three countries at once... It sits in a green door at the top of the Aventine Hill. Press one eye to the lock, and the dome of St Peter's Basilica appears at the end of a long corridor of laurel hedges, framed perfectly inside a circle of metal barely an inch wide. The dome is a kilometer and a half away, but through the keyhole it looks impossibly close. As if you could reach through and touch it. The door belongs to the Sovereign Military Order of Malta, the only order from the Crusades that still exercises sovereignty today. The villa behind the door has extraterritorial status and it's treated as separate from the surrounding Italian territory. This is why one keyhole holds three sovereign jurisdictions. The garden in front of you is the territory of the Order of Malta — not a country in the conventional sense, but a sovereign subject of international law, with its own passports, ambassadors, and a permanent observer seat at the United Nations. The land between the garden and the dome is Italy. The dome itself stands inside the Vatican. Three sovereignties in one glance... None of this was an accident. In 1765, the Venetian architect Giovanni Battista Piranesi was commissioned to redesign the priory. He laid out the gardens, planted the laurels, and aligned everything toward the distant dome of Michelangelo's masterpiece. He was building a telescope made of trees. When he died in 1778, he was buried inside the church behind the door, a few steps from the keyhole that became his most famous design...

James Lucas

245,239 Aufrufe • vor 3 Monaten

🇺🇸 Of course, after the assassination of Charlie Kirk, social media on both sides of the U.S. political spectrum exploded. The United States is walking down a very dangerous path. Our team doesn’t usually pay much attention to the U.S. political “influencer scene”—it isn’t something that particularly interests us. But we cannot ignore the public assassination of a political commentator, nor withhold expressing concern. Whatever one thinks of Kirk’s views, the murder of an activist cannot be justified, no matter how it is spun. It also sets a dangerous precedent: tomorrow, it could be someone you agree with who gets shot. Several of our team members and journalist/analyst colleagues are very public and outspoken with their opinions. Some live in the West, others elsewhere. In our line of work, we saw attacks on people for speaking their minds intensify in 2022. At first, these were online—lives were ruined, jobs were destroyed. Now, as yesterday’s case shows, people are losing their lives for their opinions. Undoubtedly, this event pours more fuel onto the fire of America’s deepening divide. And as Russians With Attitude noted yesterday: when pro-Russian locals were burned alive in Odessa in 2014, the act itself horrified many. But what truly cemented the path to full-scale civil war was the way Ukrainian nationalists openly mocked the tragedy, joking about an “Odessan barbecue.” The way U.S. "left" is mocking Charlie Kirk’s shooting carries an unsettling resemblance.

DD Geopolitics

33,774 Aufrufe • vor 11 Monaten

When darkness rises, legends answer. One flaming strike is all it takes to change destiny Credit: SeaArt.Ai🐋 SeaArt Creator Lab Prompt: Epic fantasy battle scene in a volcanic wasteland at night. A towering demonic monster with glowing lava cracks across its body faces a fearless armored warrior. The camera rapidly orbits around the combatants in a fast cinematic 360-degree motion, creating intense speed and energy. Sparks, ash, and embers swirl through the air as the ground trembles beneath them. The demon suddenly lunges forward and swings one of its enormous razor-sharp claws in a devastating attack. The claw tears through the air with explosive force, generating shockwaves, flying debris, and motion blur. At the exact moment of impact, the warrior dashes forward fearlessly. The warrior's legendary sword ignites with blazing orange and golden flames, fire wrapping around the blade and leaving a bright trail of sparks. In a dramatic slow-motion moment, the warrior unleashes a powerful flaming slash directly toward the demon. The fiery sword arc cuts through the darkness, illuminating the battlefield with intense light. Flames erupt outward as the attack connects, creating a massive explosion of fire, sparks, smoke, and molten energy. Ultra-detailed cinematic visuals, dynamic camera movement, dramatic lighting, volumetric smoke, realistic fire simulation, epic fantasy atmosphere, high contrast, action-packed choreography, motion blur, particle effects, AAA game cinematic quality, Unreal Engine 5 style, 4K, highly detailed textures, masterpiece, intense and heroic mood.

Hope Ai

17,560 Aufrufe • vor 1 Monat

Tried this viral prompt idea on BudgetPixel AI using GPT Image 2 + Seedance 2.0 Prompt remove the arrows immediately while starting the video. The camera generates footage in a first-person, ultra-high-speed perspective, faithfully following the exact path of the red line marked on the reference image. Cinematic presentation. Low-angle ground-level shot racing across the lush green meadow filled with wildflowers and tall grass, following the exact curving path shown in the reference image. Pass smoothly right beside the large fluffy long-haired cat sitting alert on the left foreground, its fur detailed and catching warm sunlight. A second cat lies playfully on its back in the grass nearby. Scattered throughout the vibrant field are numerous hens and chickens grazing and moving naturally in the same positions as the reference photo. A rustic wooden farmhouse sits nestled in the midground among the greenery. The camera then continues the smooth ascent following the curving path upward along the gentle stream area, soaring through the dense trees toward the towering rocky mountain peaks. It dramatically circles the central mountain before pulling back into a breathtaking bird’s-eye panoramic view of the entire valley, showcasing the full scale of the river, forests, fields, farmhouse, and animals below. One continuous fluid cinematic shot with no cuts. Photorealistic, ultra-detailed textures on the cats’ fur, chicken feathers, vegetation, water reflections, and rocks. Warm golden hour lighting with soft volumetric god rays, rich atmospheric depth, vibrant natural colors, National Geographic level realism, masterpiece --ar 16:9 --stylize 25 --v 6

Aaliya

14,611 Aufrufe • vor 2 Monaten