Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Next 13 App Router Page Transitions! - Each page is streamed in - Keeps old page around using framer-motion - Browser back/forward works as expected

Luca Matteis

1,185 subscribers

130,679 views • 3 years ago •via X (Twitter)

Arts Education Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Luca Matteis3 years ago

cc @samselikoff

Joonas Sandell3 years ago

This is (almost) the same way I handled default page transitions (back/forward etc.) in my portfolio

Jorge Rios3 years ago

How do you record this screen? That background looks nice

Jon3 years ago

To learn more about this:

Krzysztof Ciach3 years ago

Great content. What is the reason for using LayoutRouterContext? ;)

Lorenzo Girardi3 years ago

Hero! How did you get the trick?

Norman Dilthey3 years ago

Nice! Wouldnt it be great if that worked with ssr too? ☺️ Maybe instruct ther server to return both, the current and the next page / previous page? Not sure if that would work

Szymon3 years ago

How does this frozen router works?

David Bismut3 years ago

Back button shouldn’t trigger a transition imo or it there might be some glitches with iPhone and the swipe back gesture. Also do this handle scroll restoration?

Jonno Riekwel 🇳🇱 🇳🇿 – devlogs.gg is live 🎉3 years ago

This is so perfectly timed

Related Videos

Wanna see something wild? This is a search-as-you-type that uses navigate() on every keypress. Keeps all important state in the URL. Page reload and browser navigation always works. thanks to TanStack Router 🤘

Wanna see something wild? This is a search-as-you-type that uses navigate() on every keypress. Keeps all important state in the URL. Page reload and browser navigation always works. thanks to TanStack Router 🤘

Swizec Teller

102,500 views • 2 years ago

iOS Photos App Style Transitions Using SwiftUI NOTES: 1. The transition is not an overlay but a full-screen cover. 2. The paging is done using Page Tab View, not ScrollView.

iOS Photos App Style Transitions Using SwiftUI NOTES: 1. The transition is not an overlay but a full-screen cover. 2. The paging is done using Page Tab View, not ScrollView.

Kavsoft

13,930 views • 5 months ago

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!

Guillermo Rauch

66,022 views • 2 years ago

Watch how fast Gemini 3.1 Flash-Lite can generate websites. ⚡ This browser creates each page in real-time as you click, search, and navigate. Give it a try →

Watch how fast Gemini 3.1 Flash-Lite can generate websites. ⚡ This browser creates each page in real-time as you click, search, and navigate. Give it a try →

Google DeepMind

840,637 views • 4 months ago

This is the most impressive feature of the new bing. The GPT browser can understand and summarize a 15-page PDF in seconds. You can now ask for the the key takeaways of each page and chat about the content of the document.

This is the most impressive feature of the new bing. The GPT browser can understand and summarize a 15-page PDF in seconds. You can now ask for the the key takeaways of each page and chat about the content of the document.

Lior Alexander

600,029 views • 3 years ago

Every high-converting landing page follows the same 7-section structure. I documented the exact framework with copy-paste code for each section. Works in Webflow, Framer, or raw HTML. RT + comment "FRAMEWORK" and I'll send it. (following required for DM)

Every high-converting landing page follows the same 7-section structure. I documented the exact framework with copy-paste code for each section. Works in Webflow, Framer, or raw HTML. RT + comment "FRAMEWORK" and I'll send it. (following required for DM)

MotionViz

27,913 views • 8 months ago

This is how you choose a default browser in iOS 17.4 in the EU. The prompt shows a list of browser options. Tapping on a browser option opens the browser's page on the App Store. What happens if any of these browsers is only available on an alternative marketplace?

This is how you choose a default browser in iOS 17.4 in the EU. The prompt shows a list of browser options. Tapping on a browser option opens the browser's page on the App Store. What happens if any of these browsers is only available on an alternative marketplace?

Mysk 🇨🇦🇩🇪

13,023 views • 2 years ago

Did you ever wonder who invented browser tabs? 🤔🌐 Turns out it was a little browser called InternetWorks by BookLink Technologies! BookLink was later acquired by AOL. I tracked down version 70(!) of InternetWorks and got it running on Windows 95. The default home page is delightfully "90s web design", and it came with a bunch of recommended web sites to visit. This was before CSS, but the browser actually allowed you to change the style of each individual HTML tag. I tested this feature in the video and even ran into a bug (changing H1 to a font with different metrics keeps using the old metrics until you reload the page!) 😅

Did you ever wonder who invented browser tabs? 🤔🌐 Turns out it was a little browser called InternetWorks by BookLink Technologies! BookLink was later acquired by AOL. I tracked down version 70(!) of InternetWorks and got it running on Windows 95. The default home page is delightfully "90s web design", and it came with a bunch of recommended web sites to visit. This was before CSS, but the browser actually allowed you to change the style of each individual HTML tag. I tested this feature in the video and even ran into a bug (changing H1 to a font with different metrics keeps using the old metrics until you reload the page!) 😅

Andreas Kling

73,478 views • 3 years ago

Day 2 of Wave 10 is here! Introducing the Windsurf Browser, a fully functional browser that integrates with Cascade. You can use it like a normal browser while also selecting components, diagrams, text, logs, or anything else on the page and send it back to Cascade as context.

Day 2 of Wave 10 is here! Introducing the Windsurf Browser, a fully functional browser that integrates with Cascade. You can use it like a normal browser while also selecting components, diagrams, text, logs, or anything else on the page and send it back to Cascade as context.

Devin Desktop

153,323 views • 1 year ago

Good news for anyone with too many tabs: ChatGPT is getting better around the web. 🧩 Chrome extension: In Side Chat, ask about a YouTube video, reference your open tabs, or highlight text on a page and ask away. 💻 Desktop app: Get URL suggestions as you type, revisit your browser history, and choose how it’s managed. Rolling out today.

Good news for anyone with too many tabs: ChatGPT is getting better around the web. 🧩 Chrome extension: In Side Chat, ask about a YouTube video, reference your open tabs, or highlight text on a page and ask away. 💻 Desktop app: Get URL suggestions as you type, revisit your browser history, and choose how it’s managed. Rolling out today.

ChatGPT

958,834 views • 18 days ago

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

Danny Moerkerke

38,805 views • 2 years ago

PDF parsing is still painful because LLMs reorder text in complex layouts, break tables across pages, and fail on graphs or images. 💡Testing the new open-source OCRFlux model, and here the results are really good for a change. So OCRFlux is a multimodal, LLM based toolkit for converting PDFs and images into clean, readable, plain Markdown text. Because the underlying VLM is only 3B param, it runs even on a 3090 GPU. The model is available on Hugging Face . The engine that powers the OCRFlux, teaches the model to rebuild every page and then stitch fragments across pages into one clean Markdown file. It bundles one vision language model with 3B parameters that was fine-tuned from Qwen 2.5-VL-3B-Instruct for both page parsing and cross-page merging. OCRFlux reads raw page images and, guided by task prompts, outputs Markdown for each page and merges split elements across pages. The evaluation shows Edit Distance Similarity (EDS) 0.967 and cross‑page table Tree Edit Distance 0.950, so the parser is both accurate and layout aware. How it works while parsing each page - Convert into text with a natural reading order, even in the presence of multi-column layouts, figures, and insets - Support for complicated tables and equations - Automatically removes headers and footers Cross-page table/paragraph merging - Cross-page table merging - Cross-page paragraph merging A compact vision‑language models can beat bigger models once cross‑page context is added. 🧵 1/n Read on 👇

PDF parsing is still painful because LLMs reorder text in complex layouts, break tables across pages, and fail on graphs or images. 💡Testing the new open-source OCRFlux model, and here the results are really good for a change. So OCRFlux is a multimodal, LLM based toolkit for converting PDFs and images into clean, readable, plain Markdown text. Because the underlying VLM is only 3B param, it runs even on a 3090 GPU. The model is available on Hugging Face . The engine that powers the OCRFlux, teaches the model to rebuild every page and then stitch fragments across pages into one clean Markdown file. It bundles one vision language model with 3B parameters that was fine-tuned from Qwen 2.5-VL-3B-Instruct for both page parsing and cross-page merging. OCRFlux reads raw page images and, guided by task prompts, outputs Markdown for each page and merges split elements across pages. The evaluation shows Edit Distance Similarity (EDS) 0.967 and cross‑page table Tree Edit Distance 0.950, so the parser is both accurate and layout aware. How it works while parsing each page - Convert into text with a natural reading order, even in the presence of multi-column layouts, figures, and insets - Support for complicated tables and equations - Automatically removes headers and footers Cross-page table/paragraph merging - Cross-page table merging - Cross-page paragraph merging A compact vision‑language models can beat bigger models once cross‑page context is added. 🧵 1/n Read on 👇

Rohan Paul

149,292 views • 1 year ago

As we turn the page on Christmas 2025, a century-long tradition is revived at Boston's Old State House, as trumpet carols are brought back from the balcony. The event was paused during WWII and never returned, until now.

As we turn the page on Christmas 2025, a century-long tradition is revived at Boston's Old State House, as trumpet carols are brought back from the balcony. The event was paused during WWII and never returned, until now.

WCVB Chronicle

10,897 views • 7 months ago

Check out my newest Framer template and it's a 12+ page template & totally FREE 👀 Crest is your go-to modern app website template on Framer. With over 12 pages, it’s your ticket to launching with flair. 👉 Want the template for Free? Simply like this post, hit repost, and drop a "Crest" in the comments. I'll send you the Remix link!

Check out my newest Framer template and it's a 12+ page template & totally FREE 👀 Crest is your go-to modern app website template on Framer. With over 12 pages, it’s your ticket to launching with flair. 👉 Want the template for Free? Simply like this post, hit repost, and drop a "Crest" in the comments. I'll send you the Remix link!

Samar Jamil

13,039 views • 1 year ago

How Dilbert is drawn in 2024, using Photoshop and a Movink drawing tablet sold by Wacom. Btw, the Dilbert page-a-day calendar for 2025 is available now for pre-sales ONLY at the link in the next part of this thread.

How Dilbert is drawn in 2024, using Photoshop and a Movink drawing tablet sold by Wacom. Btw, the Dilbert page-a-day calendar for 2025 is available now for pre-sales ONLY at the link in the next part of this thread.

Scott Adams

273,540 views • 1 year ago

If you search my handle on Mr. Tansey’s X page, here is just a sampling of what you’ll find. Remember, this is a grown man who went to Harvard and works as a public defender in the legal system…

If you search my handle on Mr. Tansey’s X page, here is just a sampling of what you’ll find. Remember, this is a grown man who went to Harvard and works as a public defender in the legal system…

Brandon Straka #WalkAway

18,069 views • 1 year ago

Got five papers accepted by #ECCV2024 European Conference on Computer Vision #ECCV2026 ! Huge thanks to all my collaborators! 😃 See you in Milan 🇮🇹 Summary of Selected Works (I made a fast-forward for them 😄) - [Shape Generation] Surf-D: Generating High-Quality Surfaces of Arbitrary Topologies Using Diffusion Models, ECCV 2024. - [Efficient Motion Generation] EMDM: Efficient Motion Diffusion Model for Fast, High-Quality Human Motion Generation, ECCV 2024. - [Controllable Motion Generation] TLControl: Trajectory and Language Control for Human Motion Synthesis, ECCV 2024. - [Avatar Generation] Disentangled Clothed Avatar Generation from Text Descriptions, ECCV 2024. Project Page: Surf-D: EMDM: TLControl: SOSMPL:

Zhiyang (Frank) Dou

18,187 views • 2 years ago