Stay up to date with new components!

Web Components On Fire

Form

Submit HTML forms with JavaScript— without writing JavaScript

Counter

Animate numbers so that your readers feel their velocity.

Intersection Observer

Trigger animations when elements enter the viewport.

Lightbox

Super charge your image gallery with a full-window carousel shown in a modal

Pseudorandom

Animate any style on your page using constantly changing random value noise in a variable

Responsive Menu

A hamburger menu element that shows links in a drawer on small screens

Shy Header

Hide your header while the reader scrolls down and show it again when they scroll up.

Slinky

A custom element that makes many elements for expressive silliness. Like a drop shadow on steroids.

Split Flat

Animate text like a display from a train station of yesteryear. It’s slow but oddly satisfying.

HotFX is a collection of standalone custom elements and frontend code snippets that are like

woooooooow

Eye-popping effects and animations!

Build interactivity and effects that are only possible using JavaScript while avoiding all the JavaScript— stay in the glow of pure declarative zen with HTML custom elements and CSS.
Standalone components! Each one is a separate NPM package with no dependencies and separate versioning. Cherry pick just one or collect them all — it’s the exact same process!
Open source with a permissive MIT license. Fork them without fear for your own project.
Use these in your frontend framework of choice (React, Vue, what have you) or without any frontend framework at all in Vanilla HTML/CSS
Highly customizable with copious attributes, CSS parts and custom properties.
Comprehensive documentation for each component with excessively-commented source code. Even JavaScript novices will be able to understand how these components work behind the scenes if they so choose.

This is all the result of a lot of thinking about what Web Components could and should be.

Submit HTML forms with JavaScript— without writing JavaScript

Custom Element

Counter

Animate numbers so that your readers feel their velocity.

Custom Element Text

Intersection Observer

Trigger animations when elements enter the viewport

Custom Element Animation

Lightbox

Super charge your image gallery with a full-window carousel shown in a modal

Custom Element Images

Pseudorandom

Power random animations with value noise set on any style property on your page

Custom Element Animation

Responsive Menu

A hamburger menu element that shows links in a drawer on small screens

Custom Element

Shy Header

Hide your header while the reader scrolls down and show it again when they scroll up.

Custom Element

Slinky

A custom element that makes many elements for expressive silliness. Like a drop shadow on steroids.

Custom Element Text

Split Flap

Animate text like a display from a train station of yesteryear. It’s slow but oddly satisfying.

Custom Element Text