27 live building blocks for event sites, and 14 bigger ones inside the demos. Each is plain HTML with one data attribute: copy it, paste the markup next to it and the script does the rest.
Every example on this page is live. Try them.
Countdowns, counters and times that follow your visitor around the world.
Counts down to any date and fills a ring for each unit. A card version sits in the call to action of every inner page.
data-countdown="2026-12-20T09:00:00"Used on Main Home
Airport-board digits that flip over as the seconds pass. Made for launch and coming soon pages.
data-flap="2026-12-20T09:00:00"Used on Coming Soon
Visitors flip every session time between the venue and their own time zone. Times that land on another day get a +1. The choice is remembered.
data-tz-toggle="America/Vancouver"Used on Webinar
The tools that turn a visit into a booking: prices, calculators, an agenda and a poll.
$390
Pro membership per year
Estimated price per month
A slider, options and an add-on that add up live. One attribute sets the unit: seats, square metres or nights.
data-stand-calc data-calc-unit=" seats"Used on Pricing, Design Expo
A heart on any session adds it to a personal agenda kept in the browser. It is the same agenda on every schedule page, so try a heart and open Schedules.
data-shortlist="d1-0930"Used on Main Home, Schedules, Schedule List
What should the closing panel tackle?
Tap an answer to see the results
One tap votes, then the bars grow to show the results. Start each answer with the votes it already has.
data-pollUsed on Webinar
One attribute and a heading, a quote or a row of logos comes alive. All of it stops for reduced motion.
Breaking Boundaries
Letters rise into place one after another, while screen readers hear the plain title.
data-splitUsed on Main Home, Multiple Events, Music Festival, Design Expo
Stop making pretty stuff and start making things with soul, heart and life.
Words drop in one by one like metal type, then the words in <em> turn to the serif italic.
data-typesetUsed on Main Home
Build. Ship. Repeat.
A heading decodes from random glyphs the first time it scrolls into view.
data-scrambleUsed on Hackathon
Cards lean towards the pointer with a soft glare. Mouse only; on touch screens they stay flat.
data-tiltUsed on Speakers, Multiple Events, Music Festival
A burst in the theme colours on click. Put it on a form and it fires once the form has been sent.
data-confettiUsed on Music Festival, Hackathon, Webinar
A row of logos that loops without a seam and pauses on hover or keyboard focus. The copy that makes the loop is hidden from screen readers.
data-marqueeUsed on Main Home, Multiple Events, Design Expo
Galleries, video and photo effects that load only what they show.
Photos open full size with a caption and a counter. Arrow keys move through the set and Esc closes it.
data-lightbox="gallery"Used on Main Home, Event Single, Product Details
Plays a YouTube or Vimeo link in a popup. The page loads nothing from them until someone presses play.
data-video="https://vimeo.com/76979871"Used on About, Main Home, Speaker Single
A photo follows the pointer over a list of names. Mouse only; the list works as plain links everywhere else.
data-hover-revealUsed on Speaker Index, Music Festival
The blog and event sidebars, ready to move into any column.
A ticket-shaped card with a live countdown and a calendar file. It sticks to the sidebar as the article scrolls.
class="widget widget-ticket"Used on Single Article, Event Details
Recent articles with a thumbnail, the date and the author.
class="widget-posts"Used on Single Article, Event Details
An email field that checks the address and thanks the reader in place. Give the form an action and it posts there.
data-ajax-form data-success="Thanks for subscribing!"Used on Single Article, Event Details
A category list with the current one marked, and a cloud of tags.
class="widget-cats"Used on Single Article
No widgets match
Try another word, or show all groups.
These need a page around them, so they live where they make sense. Open one, copy its section and it works the same on your page.
Early-bird passes are 20% off until December 1. After that, prices go up and the workshop seats tend to go first.
Early-bird price ends in