正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 3 年前 •via X (Twitter)

艺术教育科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

Luca Matteis 的头像

Luca Matteis3 年前

cc @samselikoff

Joonas Sandell 的头像

Joonas Sandell3 年前

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

Jorge Rios 的头像

Jorge Rios3 年前

How do you record this screen? That background looks nice

Jon 的头像

Jon3 年前

To learn more about this:

Krzysztof Ciach 的头像

Krzysztof Ciach3 年前

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

Lorenzo Girardi 的头像

Lorenzo Girardi3 年前

Hero! How did you get the trick?

Norman Dilthey 的头像

Norman Dilthey3 年前

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

Szymon 的头像

Szymon3 年前

How does this frozen router works?

David Bismut 的头像

David Bismut3 年前

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 🎉 的头像

Jonno Riekwel 🇳🇱 🇳🇿 – devlogs.gg is live 🎉3 年前

This is so perfectly timed

相关视频

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 次观看 • 2 年前

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 次观看 • 5 个月前

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 次观看 • 2 年前

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,308 次观看 • 4 个月前

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 次观看 • 3 年前

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 次观看 • 8 个月前

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 次观看 • 2 年前

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 次观看 • 2 年前

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 次观看 • 1 年前

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

906,990 次观看 • 4 天前

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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 7 个月前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 年前