# Startup Screens
## Overview
https://www.youtube.com/watch?v=dPSx4JWzLuM
Whether it's the bling of the Gameboy, the jingles and ambiance of the PlayStation, the chorus of the SEGA Genesis or any of the other iconic startup screens throughout history, they are all designed for the same reason. To take your attention away from the boring loading that is occurring in the background and give you a brief but powerful glimpse into the pure entertainment about to be sent into your eyes and ears. The animations get ingrained in our minds as we see and hear them countless times and, over time, they become a nice little trigger for nostalgia.
This guide will go over what they are, why they exist, and how we made one in CircuitPython for the Fruit Jam OS.
## Parts
### Adafruit Fruit Jam - Mini RP2350 Computer
[Adafruit Fruit Jam - Mini RP2350 Computer](https://www.adafruit.com/product/6200)
We were catching up on a recent [hackaday hackchat with eben upton](https://hackaday.io/event/202122-raspberry-pi-hack-chat-with-eben-upton) and learned some fun facts: such as the DVI hack for the RP2040 was inspired by
Out of Stock
[Buy Now](https://www.adafruit.com/product/6200)
[Related Guides to the Product](https://learn.adafruit.com/products/6200/guides)
# Startup Screens
## What Are They
What this guide calls the "Startup Screen" is a concept that has gone by many other names such as: boot screen, startup sequence, logo animation, boot animation, system chime, startup sound and perhaps others. This is a short clip usually 20-30 seconds or less that is played when the console or device first boots up. Modern ones often include both audio, and some visual component like an animation or some flashy demo that previews the hardware's graphics capabilities. It's very common to include logo's or other branding for the console or company that created it. Originally these were fully functional in nature serving as a way to communicate status about the boot up process. Eventually device manufacturers and their marketing departments realized the opportunity provided by this first impression real estate.
Over the years different consoles have taken different approaches on audio. Many early devices used a beep or two. Short memorable sound effects and jingles are one popular archetype, a few others are chiptunes style soundtracks, and rich effects filled with ambiance no doubt intended to sound stunning on surround sound and other fancy audiophile and home theater setups.
Not only does this give the player something to see and hear while the device is loading it's operating system and booting up. It also gives the gives the manufacturer a chance to show off the hardware's capabilities, and provides a branding opportunity with the prominent and recognizable sights and sounds that players see countless times. When you heard that jingle or tune from the other room you knew instantly that it was time to grab a controller and show your friends or siblings whose virtual racing skills were supreme.
## Game Console Examples
If you don't happen to still have your favorite console, or you just want to branch out and experience some that you may have missed, YouTube has several videos that have archived them. Here is one such video that contains all console startup screens from 1977 to 2020. In the video description there are timestamp links that are handy if you're looking for a specific console.
https://www.youtube.com/watch?v=Wntf-pM5k2E
## Mac Examples
Personal computers also have a rich history of startup screens and sounds. You can observe the design philosophy evolve over the years at Apple by looking at all of their many iconic startup screens. From the hypercard stylized welcome messages, through blue overlaid smiling faces, and onto the minimalist logo and progress bar of today. Here are some videos containing the mac startups.
### Mac Startup Screens
https://www.youtube.com/watch?v=LSIzLwLgvQs
### Mac Startup Chimes
https://www.youtube.com/watch?v=fu4DTm1rQQ0
Former software architect at Apple, Jim Reekes told the story of the iconic Mac chime in this piece from Business Insider.
https://www.youtube.com/watch?v=5iOyQNKDVGs
## Windows Examples
Windows is in a bit of a different ballpark because it most typically runs on hardware manufactured by 3rd parties. The BIOS is the first thing that runs, it is often accompanied by a splash screen with a logo or basic animation. But motherboard manufacturers and their software teams and partners are a little less focused on branding and flashy first impressions. These screens are often just a logo and if your lucky a reminder of which keys to press to enter various non-default boot up modes.
After the BIOS does it's thing and launches Windows is when we get to the windows loading and startup screens which are more akin to the game console, and Mac ones discussed above. Here is a video showing the the different variations of Windows startup screens over the years.
https://www.youtube.com/watch?v=E0IXPfK3kws
## Games Apps & Beyond
Game and program developers have to contend with the same issue of needing to load various things when they are first getting started, so it's common for them to have their own startup screens as well. While they may not get seen and heard as frequently as the console or computer system ones they still get plenty enough repetition to be instantly recognizable and bring back nostalgic memories for those that experienced them during formative times.
Mobile apps evolved the same concept into splash screens which often show app or developer icons and branding first thing when the app is launched. They serve the same purpose of occupying a bit of time to distract the user from the fact that relatively boring loading of assets needed by the app is taking place.
Some devices incorporate interaction and Easter eggs into the startup screen as well. The Nintendo Gamecube startup has a fun animation of a cube rolling around in 3D to greate the Gamecube logo. If certain buttons are pressed on the controller it will change the sound effects played during the startup animation. Nintendo has also carried this fun tradition forward with the brand new Switch 2 console allowing players to access a few variations of the Gamecube startup screen if they hold the joystick or other buttons correctly when launching a Gamecube title on the console.
# Startup Screens
## Fruit Jam OS
Just like so many consoles and systems before it, the startup screen for the Fruit Jam should be fun and memorable. This page will detail some of the challenges and solutions that were faced whiled bringing the boot animation to life in CircuitPython.
Here is an MP4 file with the animation and jingle that served as a reference while developing the CircuitPython implementation of the boot animation. The Adafruit design and sound engineering teams delivered these assets to work from.
https://www.youtube.com/watch?v=X-G3H-oRFmw
## Challenges Implementing in CircuitPython
The boot animation looks and sounds great but CircuitPython doesn't support MP4 playback, so it needed to be implemented using the graphical tools available within `displayio`. Developing the code for the boot animation presented a few challenges. In overcoming some of these challenges the development team improved systems within the CircuitPython core that will have benefits far beyond just the boot animation. This page will detail some of the key problems that were faced and their solutions.
### Sproingy Sprites
In Displayio, most graphical elements make use of a `TileGrid`, which has a fixed rectangular size. That makes it not immediately obvious how to have the letters shrink and spring back to their original larger size. To achieve this effect, each letter and the apple were broken out and made into sprite sheets which contain frames of shrink and spring back to size animation. Here is an example of one of the sprite sheets:
The code flips through the sprites like a flip-book in order to make the letters visually shrink and grow. The letters in "JAM" end up overlapping on top of the letters in "FRUIT" during parts of the animation, so they have pink in the top half of their sprites which gets made transparent in the code using the `Palette`.
### Audio Interfering With Graphics
At one stage of development the graphics and audio were each working well individually, but when combined together it created all sorts of issues rendering the graphics. The situation was improved a little by slimming down the audio file to the lowest settings possible, but was still not great. A pair of improvements to audio playback within the CircuitPython core helped get things running much more smoothly.
- [PR #10240 Add RP2 support for dma\_capable](https://github.com/adafruit/circuitpython/pull/10240)
- [PR #10277 Run background tasks during display refresh](https://github.com/adafruit/circuitpython/pull/10277)
Using the latest and greatest version of CircuitPython with these improvements allowed the quality settings on the audio file to be raised back up some and play more cleanly.
### Audio Artifacts
The next problem were some rather gnarly audio artifacts that played during the jingle, think angry synth buzzing sounds. It turned out these occurred during garbage collection. The solution was two-pronged: 1) Change the python code to create fewer variables during the main animation loop to reduce the need for garbage collection to run, and 2) [improvements within the core](https://github.com/adafruit/circuitpython/pull/10264) that allowed the garbage collection times to be lower in cases where large regions of memory are occupied by bitmaps and other media files. The change to garbage collection was [detailed in a blog post.](https://blog.adafruit.com/2025/04/28/improving-garbage-collection-time-in-circuitpython/) This change caused a marked improvement in the boot animation & jingle playback, and will offer similar benefits to other CircuitPython projects that use big regions of memory without pointers, like for media files or large data arrays.
## The Result
After working through these issues and doing much tweaking and refining the result came out great! Here is a recording of the boot animation running on Fruit Jam prototype hardware.
https://youtu.be/kP7Z2TDz2Ng
# Startup Screens
## CircuitPython Code
The techniques used in the Fruit Jam OS startup screen can be used to create your own animations and effects for your own startup screens for games or apps on the Fruit Jam and beyond. This page will give an overview of how the CircuitPython code that runs the startup screen works.
## Graphics
All of the graphical effects are handled by 2 main components the `coordinator` dictionary, and the `OvershootAnimator` class. The main loop loops over these steps kicking off each one when its designated start time has come, and processes each running step to advance it by one frame.
### `coordinator`
The `coordinator` dictionary holds a list of `steps` to be carried out for the full animation. A step can be moving a visual element from one location another, changing its color, or cycling through sprites in a spritesheet. Every step in the list is just a dictionary that contains all of the values necessary to complete the step. Things like when to start, locations to move to and from, how fast to go, how far to overshoot, what color to turn, or which sprites to cycle through. Distilling the steps of the animation down into this list and dictionary data structure makes it very easy to tweak any aspect of the animation without impacting other parts. This was very helpful for refining the timing and coordinates used for various parts of the effect.
### `OvershootAnimator`
The `OvershootAnimator` class is responsible for moving a `TileGrid` from one location to another over some period of time. It can also be configured to overshoot the target location and rebound back to it. The letters in the FRUIT JAM animation use this effect as they fly on. `OvershootAnimator` can also handle sprite animations to cycle through sprites in a sheet in order to manipulate how the sprite appears in addition to its position. This is used for the springy effect of each letter makes it appear to get squished and bounce back to full size.
Importantly, the `OvershootAnimator` does all of its work in a non-blocking fashion. The code that uses it must call the `tick()` function frequently in order to process frames of the animation at the configured rate. That means that it can be used to animate many different elements on the display all at the same time which was a hard requirement for the Fruit Jam animation.
## Audio
The Fruit Jam has a [TLV320DAC3100](https://www.adafruit.com/product/6309) I2S DAC built-in for audio playback. The TLV320 circuitpython driver works with the `audiobusio` core module to play Wave audio files out of the 3.5mm jack. The audio playback is also non-blocking so that it can be played at the same time as all of the graphical animations are going. At the end of the main loop after all graphical steps are complete the code waits until the audio is finished playing before launching **code.py**
## Code
The full code for the Fruit Jam **boot\_animation.py** file is below.
https://github.com/adafruit/Fruit-Jam-OS/blob/main/src/boot_animation.py
# Startup Screens
## Making Other Startups with CircuitPython
Here are two classic startup screens re-implemented in CircuitPython. To use them click the 'Download Project Bundle' button, then unzip the bundle and copy the **code.py** and libraries to your devices **CIRCUITPY** drive.
https://www.youtube.com/watch?v=_Huh42dP3Z0
## GameBoy
The GameBoy startup is simple but iconic. The Nintendo logo slides in from the top of the screen and when it reaches it stopping position a pleasant pling sound effect reminiscent of collection coins in Mario or other games. The CircuitPython version loads the logo `Bitmap` with `adafruit_imageload` and places it over the top of a background made from a solid color `Bitmap` scaled to match the display size. The y position of the `TileGrid` with the logo in it is updated at set intervals to slide down from the top of the display. Once it reaches the stopping position the pling sound wave file is played using the TLV320 DAC output.
https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/Fruit_Jam/Fruit_Jam_Startups/GameBoy_Startup/code.py
## Mac System 7.5
With the release of System 7.5, Apple added a progress bar to the startup screen, as well as some icons along the bottom stylized like jigsaw puzzle pieces. The CircuitPython implementation uses an `OnDiskBitmap` showing an image that contains the background and welcome message box. A progress bar and series of `TileGrids` containing icons are layered on top of the background. The progress bar is updated over time, and at specified intervals a new icon gets revealed by settings its `hidden` property to `False`.
https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/Fruit_Jam/Fruit_Jam_Startups/Mac_Startup/code.py
## Featured Products
### Adafruit Fruit Jam - Mini RP2350 Computer
[Adafruit Fruit Jam - Mini RP2350 Computer](https://www.adafruit.com/product/6200)
We were catching up on a recent [hackaday hackchat with eben upton](https://hackaday.io/event/202122-raspberry-pi-hack-chat-with-eben-upton) and learned some fun facts: such as the DVI hack for the RP2040 was inspired by
Out of Stock
[Buy Now](https://www.adafruit.com/product/6200)
[Related Guides to the Product](https://learn.adafruit.com/products/6200/guides)
## Related Guides
- [Adafruit Fruit Jam](https://learn.adafruit.com/adafruit-fruit-jam.md)
- [PM2.5 Air Quality Sensor](https://learn.adafruit.com/pm25-air-quality-sensor.md)
- [Step Switch Party](https://learn.adafruit.com/step-switch-party.md)
- [Adafruit Metro ESP32-S3](https://learn.adafruit.com/adafruit-metro-esp32-s3.md)
- [Adafruit TMC2209 Stepper Motor Driver Breakout Board](https://learn.adafruit.com/adafruit-tmc2209-stepper-motor-driver-breakout-board.md)
- [Adafruit High Power Infrared LED Emitter](https://learn.adafruit.com/adafruit-high-power-infrared-led-emitter.md)
- [PyPortal IoT Data Logger with Analog Devices ADT7410, Adafruit IO and CircuitPython](https://learn.adafruit.com/iot-pyportal-data-logger-adafruitio-circuitpython.md)
- [CircuitPython Hardware: Charlieplex LED Matrix](https://learn.adafruit.com/micropython-hardware-charlieplex-led-matrix.md)
- [Fruit Jam Chyron](https://learn.adafruit.com/fruit-jam-chyron.md)
- [AdaBox 019](https://learn.adafruit.com/adabox019.md)
- [Weather Display Matrix](https://learn.adafruit.com/weather-display-matrix.md)
- [Adafruit 1.69" 280x240 Round Rectangle Color IPS TFT Display](https://learn.adafruit.com/adafruit-1-69-280x240-round-rectangle-color-ips-tft-display.md)
- [Adafruit PiCowBell HSTX DVI Output](https://learn.adafruit.com/adafruit-picowbell-hstx-dvi-output.md)
- [CircuitPython on the Arduino Nano RP2040 Connect](https://learn.adafruit.com/circuitpython-on-the-arduino-nano-rp2040-connect.md)
- [Portable Macrodata Refinement Terminal](https://learn.adafruit.com/portable-macrodata-refinement-terminal.md)
- [Garmin Lidar Lite Range Finder](https://learn.adafruit.com/garmin-lidar-lite-range-finder.md)