Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Ocean Currents Map Block for Svelte

Ten surface currents over a dot world, warm solid and cold dashed, with dots drifting along the flow and a Pause, sea temperatures, a warm and cold filter and a rail of five basins with the speed of the main current.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show how the oceans carry warmth, with this ocean currents map for Svelte with Ark UI. Currentgate, an ocean atlas, draws the land as a coarse bitmap of round dots and five basins, each with a warm current as a solid line and a cold return current as a dashed one, with a sea temperature on every current. Small dots drift along the lines to show the direction of the flow; it is the one loop in the category, driven by a bounded phase counter, with a Toggle named Pause, and it starts paused when the visitor asks for reduced motion. A Toggle Group keeps all, warm or cold currents, and the rail at the start lists the five basins with the speed of their main current in kilometres a day. Choosing a basin darkens its two currents, fades the rest and names them in the readout. It's built from Toggle, Toggle Group and Guides, with a CSS entrance only. For ocean atlases, climate explainers and schools.

FAQ

What moves, and how do I stop it?

Only the dots along the lines, one step every 80 milliseconds, repeating every 24 steps so the loop is seamless. The Pause toggle stops the timer and clears it, and when the browser asks for reduced motion the block starts paused. Nothing else on the page animates.

How are warm and cold told apart without colour?

By line style and by number: warm currents are solid, cold ones are dashed, and every current carries its sea temperature in degrees Celsius. The readout repeats the style next to the current's name, and the caption says what the lines mean.

Can I use it without a mouse?

Yes. The filter is a toggle group, Pause is a toggle and each basin in the rail is a button with aria-pressed. The map is hidden from assistive technology because the rail and the readout say the same things in words, and a polite message speaks each change.

How do I use my own currents?

Edit CURRENT_LINES: each line has a basin id, warm or cold, a name, a speed in kilometres a day, a temperature and a list of latitude and longitude pairs that the curve runs through. The lines, the temperatures, the rail and the readout are all computed from them.

What stays local in the demo, and how do I wire it up?

All of it. The currents are real places named in text, but the speeds and temperatures are invented and nothing is measured. In your app feed the lines and the figures from your ocean data service and keep the readout for the chosen basin.

How does it look on a phone?

The map keeps a fixed height with the rail under it, and the readout holds two lines of height whichever basin is chosen. The dots are small enough to read at 320 px and Pause is always in the toolbar.

All 100 map blocks