-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

- ---
title: "Party CSS"
date: 2025-08-10T00:00:00+00:00
draft: false
category: project
excerpt: "Make any HTML element party like a parrot with this simple CSS class that adds bobbing motion and rainbow colours."
- ---

# Why don't you love me?

[repo-large:WillMatthews/party-css]

I love party parrots.
~wave:My boss~ regrettably does not.
I'm a big believer in exposure therapy, so I made this project to ~torment~ immerse him in party parrots with the hope that he would come around to liking them.
The ultimate form of exposure therapy was to turn the frontend of the project I work on into a partified wonderland.
Unfortunately it didn't work and somehow he hates party parrots even more. :notlikethis:

Making a 'party div' is quite simple, I define a `🦜` css class which works all the magic.
It makes HTML elements bob in an oval and change rainbow colours. :cinema:

<div class="🦜">Very cool.</div>

The implementation of `🦜` is very simple.
It's fundamentally a composition of two animations; `🎉` and `🎨`.

```css
.🦜 {
  animation:
    🎉 var(--anim-time) infinite linear,
    🎨 var(--anim-time) infinite linear;
  transform-origin: bottom center;
}
```

The `🎨` animation is responsible for the colour.
It was created by sampling the original [party parrot gif](https://cultofthepartyparrot.com/) for each frame.
I created a simple one-shot script to grab the colours called [`extract-colours.py`](https://github.com/WillMatthews/party-css/blob/main/extract-colours.py).

`🎉` on the other hand is responsible for the motion.
The keyframes are calculated using basic trigonometry to make an oval motion by combining skew, translation, and scale.

The entire CSS definition for `🦜` is created by another cack-handed one-shot script [`party-css-gen.py`](https://github.com/WillMatthews/party-css/blob/main/party-css-gen.py), combines work generating both animation components for a seamless, partyparrotesque monstrosity.

It's not perfect, but for that reason you have multiple parameters to tune the animation to your liking.
The following parameters are available:

```css
- --max-translation: 0px; /* pixels */
- --translation-phase: -3; /* radians */
- --max-skew: 18; /* degrees */
- --max-scale-diff: 0.15; /* scale factor */
- --anim-freq: 2; /* Hz */
```

1. `--max-translation` is the maximum amount of horizontal translation the element will undergo in pixels.

2. `--translation-phase` allows you to phase shift the translation.
   It's in radians, so 0 is no phase shift, pi is a half cycle shift, etc, relative to the skew.

3. `--max-skew` is the maximum amount of skew the element will undergo in degrees.
   Skew is a bit weird as it is a transvection. It looks weird for large values.

4. `--max-scale-diff` is the maximum difference in vertical scale the element will undergo.
   It's a scale factor, so 0.1 is a +/-10% difference in scale.

5. Finally, `--anim-freq` is the frequency of the animation in Hz.
   The traditional party parrot gif is 2Hz, but you can change this to whatever you like.

<div class="🦜">
<h1> Party or die!</h1>
</div>

<img src="parrot.gif" alt="The party parrot, bobbing and cycling through the rainbow" class="post-img post-img--bare" width="128" height="128" loading="lazy" decoding="async">

[See it in action on jsfiddle](https://jsfiddle.net/tk1pgjrz/33/)
or just visit the repository [repo:WillMatthews/party-css] where you can find the CSS and the scripts used to generate it.
On there I also provide a fancy bookmarklet which you can use to partify any webpage you like, wield this power ~party:recklessly~.

A special thank you is owed to [jmhobbs](https://github.com/jmhobbs), the keeper of the parrots, for providing an [excellent resource](https://cultofthepartyparrot.com/) and for graciously adding the link to this project on the party parrot website. :dadparrot:
-----BEGIN PGP SIGNATURE-----

iQIzBAEBCgAdFiEEJtHIQX7gIiqRWdSs/RuAbpOsR8kFAmrxao0ACgkQ/RuAbpOs
R8k5BxAAprt6OBL7UlUt+YcCdzJwgjUQ7rBIBKV2KRKbJm283I5nNgjzwRv0qo7f
CL5nbB+zbJlrCYAcIY8ndzNijaJuiOudBZ0k7aJTrANKlZlkWpSNBVVRxzwJ5Njb
m9xEXAFi9KwnLekcL6c6vgv3+E7YqizR6o2Cyb+LZ0dJ3A0ohdDrPZM+bDkPpsLZ
7tffxSPaeTfjEwRErse7oLGlNvIFRuk99k3U95gI7B2jbnahbCV72z7nPCjNCQ8h
4KTwUSA4KGQMZRo1BBPDubFvVnwqP3deo2ZVGf2ed96bOmdV7s+rJZsRquxHU88H
VXJhrWR/RfIxfI8pSZBhZHMkDV/8aBpGs4N1W4pTFKlGkB+Nnv2GC7WD0GfuL3Wz
NDdS1flLTosysJTIQl0aN5mjRUv9qR7CuwOFl38nLileCRLwWfPxJoVha7fEImF1
+reflGPOX/QndI3Za/vFZ/XrTzIpXNZOZpuvgydLqOCGGTAAyddQrtDzgfBg84me
9CtayucJPLwJP48gaxO8sgzKMVqc6q/iSjuwRk8g6kenx4Cu3r7FPAxe79ZDkM+H
D1wD6nZyZJB68V2oPAZpe8mB8gLiIeq6n64iH+hE+xFLsBuEbrkf1vc6IQ6NV26+
VN7/d8AB9+yYxfBY7Jl3po1F4tqvTbYsza14XxYv6bwRnC5OVwQ=
=xQ+Z
-----END PGP SIGNATURE-----