New Year, New You?

Burst From Your Cocoon!

Jan 1st - Jan 22nd

Thank you everyone who participated in this event!

Webpage Submissions

shubi - 2025 Reflections
humanfinny - New Year's 2026 {For 32Bit, My Beloved}
Cobalt - 2025 Wrap-up
jasper - new year, new me
Biggus - 2025 retrospective, 2026 goals
Hegad - Hegad's recap of 2025
gibb - New year, Old me, New lessons
Jay - Year in Postcards: 2025
lxrinchan - New Year, New You
Marina - 2026 Recap
lynx - New Year, New Opportunities!
Lazer - New Year, New Me?
lina - a journey through 2025...
starbreaker - New Year, New Website
juette - who am i as we begin 2026?
Cosy - A Second Year In Review

Prompts

Blog / Page

Make a page or write a blog post that explores a reflection on past decisions (good or bad), or brainstorms / shares plans for the future.

Pixel Art

Customize your own Butterfly or Moth!

You can make them static or animated. Why not put a jar for it on your site too!

Get the assets and code here

Credits

Rodrick created this page and the template assets.
Background Image
Rope Image
Wood Image
Tree Stump Image
Paper Image
Taped Note Image

Pixel Art Instructions

Static

If you want to make a static little bug, just right click and save one or both of these templates.

Animated

If you want an animated bug, you gotta download multiple images. They're each named after the part they represent.

Moth's parts.

Butterfly's parts.

After you got your bug parts downloaded, you gotta add the following code to your site and properly link the sources of your bug parts. For the outer div, make sure to only use the "moth" class or the "butterfly" class. It's because they're different sizes.

Don't change the image sizes of these parts!!!

And lastly, you have to add this CSS to the page holding your bugs.

.insect {
    image-rendering: pixelated;
    overflow: hidden;
    width: 100%;
}

.insect img { margin: 0; }

.moth { aspect-ratio: 74 / 36 !important; }
.moth .wing { aspect-ratio: 37 / 36 !important; }
.butterfly { aspect-ratio: 76 / 47 !important; }
.butterfly .wing { aspect-ratio: 38 / 47 !important; }

.insect .body {
    z-index: 6;
    width: 100%;
}

.insect .wings {
    position: relative;
    top: -106%;

display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.insect .left,
.insect .right {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.insect .wing {
    width: 100%;
}
.insect .top {
    z-index: 8;
    position: relative;
}
.insect .bottom {
    z-index: 7;
    position: relative;
    top: calc(100% * -1);
}

.insect .left .wing { transform-origin: right center;}
.insect .right .wing { transform-origin: left center; }
.insect .top {
    animation: flutter 300ms infinite;
}
.insect .bottom {
    animation: flutter_offset 300ms infinite;
}

@keyframes flutter {
  0% { transform: rotateY(0); }
  45% { transform: rotateY(70deg); }
  95%, 100% { transform: rotateY(0); }
}

@keyframes flutter_offset {
  0%, 5% { transform: rotateY(0); }
  50% { transform: rotateY(70deg); }
  100% { transform: rotateY(0); }
}

Jar

Finally, we have the jar. If you want a jar like the one on this page, download the jar image and add the CSS to your site.

Create a div, or other element, to be your jar. Don't forget the ID. The jar works as a border-image. It'll resize with your div.

Feel free to edit the jar image and CSS to fit your style.

Close