shadcn.io is not affiliated with official shadcn/ui
Page Speed Monitor Filmstrip Block for Radix UI
A filmstrip of seven frames, 0.0 to 3.0 s, of a page load drawn as greyscale skeletons with a timing rule for first byte, first paint, largest paint and load, and a profile select that swaps Mobile on 4G for Desktop on cable.
Installation
Overview
Watch a page appear instead of reading a number with this page-speed panel for React with Radix UI. It is Framewhistle, a page-speed lab, replaying a typed load. Seven frames, one every half second from 0.0 to 3.0 s, each draw a skeleton of the page in greyscale shapes (a header bar, a hero, two cards, text lines) that fills in as time passes, with the frame's time and how visually complete it is. Under the frames a rule puts four marks at the same positions: first byte, first content, main content and load, staggered so close marks never overlap. A select swaps the profile (Mobile on 4G, Desktop on cable) and with it every time and every frame. The frames are a radio group: arrow keys move between them, and the chosen one is read in words ("Frame 4, 1.5 s: header and hero drawn, images still loading, 34% visually complete."). A row of four figures repeats the timings. No pictures are used; the shapes are CSS. Guides draw the frame and its bands; the entrance is CSS only. For performance reviews, lab runs and any report that has to show what a visitor saw.
FAQ
How do I use my own load?
Edit MOBILE and DESKTOP (and add more to PROFILES): each holds the four marks (ttfb, fcp, lcp, load), when each part of the skeleton appears (header, hero, lines, cards, images) and done, the visual completeness of each of the seven frames. The shapes shown in a frame, the sentence that reads it and the marks on the rule are worked out from those times.
Are the frames screenshots?
No. Each frame is a few CSS shapes in grey weights, drawn from the times in the profile: a part shows once the frame's time reaches the time it appears, and image areas stay empty until the images time. Swap the shapes for your own page's layout if you want the drawing to match.
What stays local in the demo?
All of it. The timings are a typed example, nothing is measured and nothing is requested. The select and the chosen frame are local state. In your app feed it the frame times and completeness from your lab tool.
How do I move between frames with the keyboard?
The frames are native radio inputs with one name, so Tab enters the group, the arrow keys move and choose a frame, and the chosen frame gets a visible ring. The reading in the polite status line follows the frame.