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.

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 Aufrufe • vor 3 Jahren •via X (Twitter)

Kunst Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Luca Matteis

Luca Matteisvor 3 Jahren

cc @samselikoff

Profilbild von Joonas Sandell

Joonas Sandellvor 3 Jahren

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

Profilbild von Jorge Rios

Jorge Riosvor 3 Jahren

How do you record this screen? That background looks nice

Profilbild von Jon

Jonvor 3 Jahren

To learn more about this:

Profilbild von Krzysztof Ciach

Krzysztof Ciachvor 3 Jahren

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

Profilbild von Lorenzo Girardi

Lorenzo Girardivor 3 Jahren

Hero! How did you get the trick?

Profilbild von Norman Dilthey

Norman Diltheyvor 3 Jahren

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

Profilbild von Szymon

Szymonvor 3 Jahren

How does this frozen router works?

Profilbild von David Bismut

David Bismutvor 3 Jahren

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?

Profilbild von Jonno Riekwel 🇳🇱 🇳🇿 – devlogs.gg is live 🎉

Jonno Riekwel 🇳🇱 🇳🇿 – devlogs.gg is live 🎉vor 3 Jahren

This is so perfectly timed

Ähnliche 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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 3 Jahren

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,896 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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

953,901 Aufrufe • vor 13 Tagen

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren