Secteur — Dashboard template

The 10 effects in this site

Command Palette ⌘KPremium
Header search: command palette (chargers, views, actions) opened by click or ⌘K / Ctrl+K
Classic SpinnerFree
Loading ring in the “Refresh” button (Chargers view) and in the “Live” pill while syncing
Card SkeletonFree
Charger detail panel: shimmering skeleton shown while loading, before the content
Fade ThroughFree
View switching (Dashboard, Chargers, Work orders, Settings): grey veil covering the content during the swap
Line Chart DrawingPremium
Dashboard, “Network load” panel: the 24-hour curve draws itself, then the area fills in
Gauge MeterPremium
Dashboard, “Power demand” panel: needle gauge rising to 70% of the contracted power
Heatmap Cell AnimationPremium
Dashboard, “Occupancy” panel: 7-day × 4-week grid whose cells shift colour (recompute button at the top right of the panel)
Data Table Row AnimationPremium
Chargers view: table rows slide in and highlight in sequence on every sort, filter, page change or refresh (manual, or automatic every 30 s)
Toast StackPremium
Stacked alerts at the top right: a network alert a few seconds after opening, the last three when clicking the bell, and action confirmations (reboot, ticket, settings)
Toggle MorphPremium
Settings view: the six switches (notifications, off-peak tariff, load shedding) whose knob stretches as it slides

Screenshots

Click a screenshot to see it full size.

Names and figures are fictional.

Frequently asked questions

What kind of business is the Secteur template for?

It was designed for businesses such as: business software, back office, monitoring or tracking tool (fleet, stock, field work, energy), customer area or admin panel.

Which effects does Secteur use?

10 effects from the Effect.Labs catalogue, 3 free and 7 Premium: Command Palette ⌘K, Classic Spinner, Card Skeleton, Fade Through, Line Chart Drawing, Gauge Meter, Heatmap Cell Animation, Data Table Row Animation, Toast Stack, Toggle Morph. Each one has its own page with a demo and its code.

What do I get, and how much does it cost?

The whole site is shown in the video and screenshots; it is not sold. What you take away are its effects: the “The 10 effects of this template” button adds the Premium ones to your cart, picking the cheapest pack for you, and saves the free ones to your favorites. One-time payment, no subscription; a free account includes 1 Premium effect on us.

How do I use these effects on my website?

Each effect is plain HTML, CSS and JavaScript with no framework or dependency: paste it into any site that accepts custom code (plain HTML, WordPress, Webflow, React, Vue…). You keep your own text, colours and photos.

Does the site work on mobile?

Yes: it is checked on desktop and mobile, in English and French, and its animations are toned down for visitors who asked for reduced motion.