shadcn.io is not affiliated with official shadcn/ui
Festival Grounds Map Block for Radix UI
A drawn plan of a festival with three stages, a gate and twelve marks for food, toilets, first aid and water, all real buttons; a time slider lights the stage with a set on and an On now table reads the running order.
Installation
Overview
Help visitors find their way round a site with this festival grounds plan for React with Radix UI. Fennelgrove, a weekend festival, draws its field as a plan rather than a street map: three stages as areas, a gate, paths, a pond and twelve small marks for food, toilets, first aid and water. Every area and mark is a real button on the plan, and the same places are in two lists under it, so the plan is never the only way in. A Slider from 14:00 to 23:00 lights the stage that has a set on at that time and an "On now" table reads the running order for the same minute. A ToggleGroup filters one kind of mark, and pressing a mark says how far it is from the nearest stage. The plan zooms from one to three times and pans inside the stage with buttons, the arrow keys, plus, minus and zero, or a mouse drag, while the page keeps scrolling. For festivals, fairs, campuses, show grounds and any site plan.
FAQ
Where does the running order come from?
GIG_LINES is one line per set: stage, start, end and act. gigAt finds the set a stage has on at the chosen minute, gigAfter the next one, and the table, the lit areas and the status line all read those two helpers. A gap between sets reads "Between sets" with the time of the next one.
How do the zoom and pan work?
The plan and its buttons share one wrapper that is moved and scaled with a CSS transform from a view of three numbers. The view is clamped so the plan always covers the stage, the marks keep their size by scaling inversely, and the drag only pans for a mouse or pen. Touch keeps scrolling the page and the wheel never zooms, so a phone uses the three buttons.
Can I use it without a mouse?
Yes. Focus the plan to pan with the arrow keys and zoom with plus and minus, or press the zoom buttons. The stages and marks are buttons in the plan and rows in the lists, each one a pressed toggle; a mark's name is spoken, not its two-letter code. A polite message gives the running order once the slider settles.
Are the distances real?
No. A distance is drawing units times METRES_PER_UNIT, rounded to ten metres, and the caption says the plan is not to scale. Use your site's surveyed coordinates and a walking route in your app.