Found that In iOS 27, adding the “matchedTransitionSource” modifier... before applying a glass effect modifier will result in the same transition as a menu-style morphing effect! Full Implementation With Custom Tab Bar: NOTES: Video 2: Applying transition source modifier before the glass effect. Video 3: Applying transition source modifier after the glass effect. Tested on Xcode 27 Beta 5 (iOS 27 Beta 5)show more

Apparently new in iOS 27 beta 3: the wallpaper... depth effect is now applied during the Notification Center opening transitionshow more

On iOS 26, you can now directly apply the... matchedTransitionSource modifier to any ToolBarItems. Furthermore, presentation detents are also compatible with Zoom Transitions. (However, on iOS 18, presentationDetents will have no effect and will result in a full-screen cover behavior.) Eg: ToolBarItem {} . matchedTransitionSource(…)show more

iOS 27 beta 4 removes the depth effect when... opening Notification Center, a change that first showed up in beta 3.show more

The Compass app icon got a Liquid Glass update... in iOS 27 beta 2.show more

iOS 27 Beta 5 makes Liquid Glass a bit... more transparent with the Ultra Clear setting compared to earlier betas.show more

Starting with iOS 27, we can actually convert a... tab bar to a sidebar. A new modifier was introduced to do this. “.defaultTabBarPlacement(.sidebar)” As of current testing, this seems to work on iPhones as well when the app is in landscape mode. This is the same behavior used in the iPhone Health app, where the tab bar converts into a sidebar in landscape mode!show more

I’m just gonna say it: I’m disappointed with iOS... 27. - It is fast, sure. - It is snappy too. - It fixes many bugs that were there since iOS 26. - It improves Liquid Glass drastically. The problem is, when I heard at WWDC26 that Apple is making iOS 27 all about optimization and polish, I was expecting iOS to return to its former glory of iOS 15. But, iOS 27 is not even 70% polished as iOS 15 was. There’s so many little things and attention to details that iOS 15 had and iOS 27 simply doesn’t. Here’s a few examples: - When you picked up a call before the contact poster update in iOS 17, using the swipe gesture, the swipe indicator itself transitions into the red hang-up button. Smoothly. On iOS 27, there’s no such transition. It just happens. - On iOS 27, the Photos app is still very slow and janky in the Collections tab. It takes several seconds for everything to load. - Just look at the Safari below. It’s just so smooth, flowy, and animations are designed so well before the Liquid Glass update. iOS 27 Safari feels like a huge downgrade. I was expecting iOS 27 to work on these little details around the system that have been going away since iOS 16. But it didn’t.show more

⚠️ Private API of the day... Cracked the case... of Apple's custom share sheet in MobileSlideShow (Photos). UIActivityViewController has a private `setCustomViewController:` method that lets you add a custom view as a header. I combined this with a custom view controller transition for the full Photos effect.show more

REALLY cool effect for creating lyric videos super fast... with AI: 1. made a quick demo track with ElevenLabs 2. nano banana workflow that generates the "cut out ransom style" text based on the lyrics 3. used my transition agent to morph between them Voilà, all in 5 min:show more

👀 Not sure if this is intentional or a... bug in iOS 27 Beta 3… When waking the iPhone, the lock screen subject appears first, then the rest of the wallpaper fades in a moment later. Kind of a cool effect if it’s intentional… but it also feels a little buggy. 🤔📱 Feature or bug? What do you think? 👇🍎show more

LAST STEP: Upload the video in STEP 4 to... Capcut, then add the Poster in STEP 5. Add a background sound, apply Caption, use relevant Sound FX with Glare II transition. Click on "Cover" and upload the same Poster as the cover. UP NEXT: Compatible Prompt for all UGC cat' + CTA.show more

Two burgers. Same calories. Very different construction. Nano Banana... Pro + Kling 2.5 Turbo I generated this AI effect for Impossible Foods in 10 mins with the new AI system my team and I are building. Insane 🤯 The system creates two high-quality images of a regular burger and a plant-based burger along with their deconstructed elements via Nano Banana Pro. Then, it animates the transition between the 2 images with Kling 2.5 Turbo. The combined effect? A visual that sparks online debate and awareness for the burger company. RT & Comment 'BURGER' if you want me to DM you early access to the system as well as all the prompts I used for this!! (must follow for auto dm to send)show more

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 exampleshow 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

Seedance 2.0 - Manga to Video Test 2: Tested... a magical girl transformation sequence using 5, 10, and 15s length to see what it would remove or keep. Generating a manga as base might actually be a better way to control transformation output in anime than creating a grid. 🧐 Prompt: Animate this manga page of a girl transforming into a magical girl. Full color cinematic Japanese anime. Start at the first panel at the top right of the page. She beings to glow blue brightly as her body become a blue glowing silhouette. Camera orbits the girl rapidly, pushing in and out of Extreme close ups to highlight the formation of her shoes, gloves, bow, and tiara before her eyes opening as she dramatically strike the pose in the final panel. Magical light burst effect. $100million budget. Additional sakuga pages. Masterpiece. ----- Yes I know there is a typo that says "beings," instead of begins. The credits were spent and it didn't seem to effect the output so I left it on all 3 to maintain consistency. 😅show more

home page hero ✨ Design notes: - "Forever" hero... text dot pixel FX done in Unicorn Studio. (I will do a whole tutorial on this later. Unicorn's WebGL engine is absolutely wild and very powerful / robust) - built in Framer - I wanted to recreate the iOS unlock effect where your home screen icons cascade into place in a beautifully timed choreography. This took a lot of careful timing using Framer's "Appear" effect on the hero text and surrounding avatars because it was super important that we didn't lose the legibility of our main message ("Build Your Forever Audience") with all the animations. - If you look closely, the choreography is setup to lead your eye through the hero text first starting with "Build Your" then "Forever" and finally "Audience." - With those text layers in place + the surrounding avatars, there is a slight 1 sec pause before the remaining elements slide in below and above (How it works, CTA buttons, announcement badge, and lastly the main nav). - All told the entire loading sequence is 6 seconds - Custom particle system powers the interactive star field (the stars slowly gravitate to your pointer position, and the star field perspective changes ever so subtly as you move your mouse around on the page) - I have 3 shooting stars made of small white line layers that start out off canvas rotated at different angles that shoot across to another point off canvas at random times on a loop effect. - Given this hero scene is in space, I wanted the surrounding avatar elements to "float" in low gravity mode. For this I used Framer's loop effect that slowly oscillates the layer's y position. I then offset the delay of each element randomly to stagger the floating loop so each avatar floats independently/randomly - The final major treatment for this hero scene was the scroll animations on the avatars. I wanted to create a bit of a warp speed effect when you scroll down, as if the avatars were being pulled or sucked into a worm hole as you scroll down below this hero fold. - To accomplish this, I applied Framer's scroll transform affect set to "section in view" on each of the floating avatars, and set the "scroll to" position of the upper avatars to be much, much further away on the y-axis than the "scroll to" position of the lower avatars. (eg. -1700px on upper most avatars vs. -600px on lowest positioned avatars). This effectively causes the upper avatars to slide up off the hero canvas with much greater velocity than the lower positioned avatars. - And when you scroll back up to the hero section, the inverse happens where the lower positioned avatars "arrive back in place" from up above the hero canvas before the upper avatars come back into the scene and settle in place. - Overall I wanted this hero section to feel alive. The floating avatars, particle system with very subtle star movements, and the Caustics effect on the "Forever" text all sort of move at the pace of slow breathing - which is a great pace to create a sense of life and comfort in your scene. Conversion Results (so far) - When this new Framer site launched along with Calaxy v1.9 release on Base a couple weeks ago, we saw a surge in traffic, around 20k page views in the first few days. - Of those 20k hits, 11k visited the app install page ( - which is our main CTA - We saw around 10K new users in the first week after v1.9 launch Overall I'm very happy with the new site and early performance metrics. Lots of tweaking to do but its a good start. If you are a designer building in Framer - hit me with any questions on the above hero notes. Happy to share more specifics! 👾show more

FABLE 5 + HIGGSFIELD BUILT A $35,000 ANIMATED SITE... IN 50 MINUTES FOR $27 IN CREDITS. HERE'S THE ACTUAL RECEIPT. no theory. this is the play-by-play from the last one I shipped: → 0:00 - brief + scroll concept (Claude) 4 min. $0. it reads the brief and scripts what the visitor feels at second 3, 15, 40. → 0:04 - hero clip + b-roll (Higgsfield) 9 min. ~$27 in credits. cinematic footage from 30+ models, matched to the story. → 0:13 - the build (Claude Code) 20 min. $0. GSAP ScrollTrigger + Lenis, frame extraction, asset optimization. zero hand-coded keyframes. → 0:33 - cinematic layer 6 min. $0. film grain, particles, vignette, glass cards, color tints - baked in, no config. → 0:39 - QA + copy + mobile 12 min. $0. checks load speed, breakpoints, whether the scroll lands. rewrites what doesn't. TOTAL: ~51 minutes. ~$27 in credits. 1 operator. the same brief at a studio: 4 people, 3 weeks, $6,000-$35,000. same deliverable. CONNECT HIGGSFIELD (MCP): add it as a custom connector in Claude Code: - mcp_servers: - higgsfield: - url: " one OAuth flow. Claude generates and pulls clips directly - no exporting by hand. the invoice was never the work. now you can literally time the work. Follow me, reply "RECEIPT" and I'll send you the full step-by-step Playbook. full breakdown in the article 👇show more