Skip to main content
Startup Screens

Startup Screens

Making first impressions count with a pleasing animation and jingle.

by Tim C
published June 20, 2025, last edited June 20, 2025
posted in CircuitPython LCDs & Displays/ HDMI
Save Link Note Download
2
Beginner
Project guide
💖 2

Overview

Play Video: Startup Screens Learn Guide Introduction #adafruit

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

Angled shot of assembled mini computer PCB with plate.
We were catching up on a recent hackaday hackchat with eben upton and learned some fun facts:...
Out of Stock
Out of Stock

Page last edited June 17, 2025

Text editor powered by tinymce.

What Are They

Mac loading screen with smiling blue faces, a progress bar indicating loading completion, and icons along the bottom for different system componenets.

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.

Play Video: All Game console startups 1977-2020

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

Play Video: All Mac Startup Screens

Mac Startup Chimes

Play Video: ALL APPLE MAC COMPUTER STARTUP CHIMES

Former software architect at Apple, Jim Reekes told the story of the iconic Mac chime in this piece from Business Insider.

Play Video: Story Of The Iconic Mac Startup Noise

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.

Play Video: (Updated) Evolution of Windows Startup Screen 1985-2022

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.

Page last edited June 17, 2025

Text editor powered by tinymce.

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.

Play Video: Fruit Jam Boot Animation Reference Video #adafruit

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:

Spritesheet for the letter J in the Fruit Jam boot animation

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.

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 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. 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.

A line chart showing that the garbage collection time went down from times as long as 18 seconds down to just a fraction of a second
Improvement in garbage collections times under a worst-case benchmark test.

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.

Play Video: Fruit Jam Startup Animation on Hardware #adafruit

Page last edited June 17, 2025

Text editor powered by tinymce.

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 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.

Download Project Bundle
Copy Code 
# SPDX-FileCopyrightText: 2025 Tim Cocks for Adafruit Industries
#
# SPDX-License-Identifier: MIT
import json
import math
import time

import adafruit_fruitjam
import adafruit_imageload
import board
import supervisor
from displayio import Group, TileGrid
from launcher_config import LauncherConfig

launcher_config = LauncherConfig()

BOX_SIZE = (235, 107)
TARGET_FPS = 70

display = supervisor.runtime.display
display.auto_refresh = False

i2c = board.I2C()
# Check if DAC is connected
while not i2c.try_lock():
    time.sleep(0.01)
if 0x18 in i2c.scan():
    tlv320_present = True
else:
    tlv320_present = False
i2c.unlock()

if tlv320_present:
    if "audio" in launcher_config.data and "volume" in launcher_config.data["audio"]:
        volume_level = launcher_config.audio_volume
    else:
        volume_level = 0.7
    fjPeriphs = adafruit_fruitjam.peripherals.Peripherals(
        audio_output=launcher_config.audio_output,
        safe_volume_limit=launcher_config.audio_volume_override_danger,
    )

    fjPeriphs.volume = volume_level

    wave_file = "/boot_animation_assets/ada_fruitjam_boot_jingle.wav"


class OvershootAnimator:
    """
    A non-blocking animator that moves an element to a target with overshoot effect.

    Instead of blocking with sleep(), this class provides a tick() method that
    should be called repeatedly by an external loop (e.g., game loop, UI event loop).
    """

    def __init__(self, element):
        """
        Initialize the animator with an element to animate.

        Parameters:
        - element: An object with x and y properties that will be animated
        """
        self.element = element
        self.pos_animating = False
        self.start_time = 0
        self.start_x = 0
        self.start_y = 0
        self.target_x = 0
        self.target_y = 0
        self.overshoot_x = 0
        self.overshoot_y = 0
        self.duration = 0
        self.overshoot_pixels = 0
        self.eased_value = None

        self.cur_sprite_index = None
        self.last_sprite_frame_time = -1
        self.sprite_anim_start_time = -1
        self.sprite_anim_from_index = None
        self.sprite_anim_to_index = None
        self.sprite_anim_delay = None

    def animate_to(
        self,
        target_x,
        target_y,
        duration=1.0,
        overshoot_pixels=20,
        start_sprite_anim_at=None,
        sprite_delay=1 / 60,
        sprite_from_index=None,
        sprite_to_index=None,
        eased_value=None,
    ):
        """
        Start a new animation to the specified target.

        Parameters:
        - target_x, target_y: The final target coordinates
        - duration: Total animation time in seconds
        - overshoot_pixels: How many pixels to overshoot beyond the target
                            (use 0 for no overshoot)
        """
        _now = time.monotonic()

        # Record starting position and time
        self.start_x = self.element.x
        self.start_y = self.element.y
        self.start_time = _now
        if start_sprite_anim_at is not None:
            self.sprite_anim_start_time = _now + start_sprite_anim_at
            self.sprite_anim_to_index = sprite_to_index
            self.sprite_anim_from_index = sprite_from_index
            self.cur_sprite_index = self.sprite_anim_from_index
            self.sprite_anim_delay = sprite_delay

        # Store target position and parameters
        self.target_x = target_x
        self.target_y = target_y
        self.duration = duration
        self.overshoot_pixels = overshoot_pixels

        # Calculate distance to target
        dx = target_x - self.start_x
        dy = target_y - self.start_y

        # Calculate the direction vector (normalized)
        distance = math.sqrt(dx * dx + dy * dy)
        if distance <= 0:
            # Already at target
            return False

        dir_x = dx / distance
        dir_y = dy / distance

        # Calculate overshoot position
        self.overshoot_x = target_x + dir_x * overshoot_pixels
        self.overshoot_y = target_y + dir_y * overshoot_pixels

        self.eased_value = eased_value

        # Start the animation
        self.pos_animating = True
        return True

    def sprite_anim_tick(self, cur_time):
        if cur_time >= self.last_sprite_frame_time + self.sprite_anim_delay:
            self.element[0] = self.cur_sprite_index
            self.last_sprite_frame_time = cur_time
            self.cur_sprite_index += 1

            if self.cur_sprite_index > self.sprite_anim_to_index:
                self.cur_sprite_index = None
                self.sprite_anim_from_index = None
                self.sprite_anim_to_index = None
                self.sprite_anim_delay = None
                self.last_sprite_frame_time = -1
                self.sprite_anim_start_time = -1
                return False

        return True

    def tick(self):
        """
        Update the animation based on the current time.

        This method should be called repeatedly until it returns False.

        Returns:
        - True if the animation is still in progress
        - False if the animation has completed
        """
        still_sprite_animating = False
        _now = time.monotonic()
        if self.cur_sprite_index is not None:
            if _now >= self.sprite_anim_start_time:
                still_sprite_animating = self.sprite_anim_tick(_now)
                # print("sprite_still_animating", still_sprite_animating)
                if not still_sprite_animating:
                    return False
        elif not self.pos_animating:
            # print("returning false cur_sprite_index was None and pos_animating False")
            return False

        # Calculate elapsed time and progress
        elapsed = _now - self.start_time
        progress = elapsed / self.duration

        # Check if animation is complete
        if progress >= 1.0:
            # Ensure we end exactly at the target
            if self.element.x != self.target_x or self.element.y != self.target_y:
                self.element.x = self.target_x
                self.element.y = self.target_y

            self.pos_animating = False
            if still_sprite_animating:
                return True
            else:
                return False

        # Calculate the current position based on progress
        if self.overshoot_pixels > 0:
            # Two-phase animation with overshoot
            if progress < 0.7:  # Move smoothly toward overshoot position
                # Use a single smooth curve to the overshoot point
                eased = progress / 0.7  # Linear acceleration toward overshoot
                # Apply slight ease-in to make it accelerate through the target point
                eased = eased**1.2
                current_x = self.start_x + (self.overshoot_x - self.start_x) * eased
                current_y = self.start_y + (self.overshoot_y - self.start_y) * eased
            else:  # Return from overshoot to target
                sub_progress = (progress - 0.7) / 0.3
                # Decelerate toward final target
                eased = 1 - (1 - sub_progress) ** 2  # ease-out quad
                current_x = self.overshoot_x + (self.target_x - self.overshoot_x) * eased
                current_y = self.overshoot_y + (self.target_y - self.overshoot_y) * eased
        else:
            # Simple ease-out when no overshoot is desired
            if self.eased_value is None:
                eased = 1 - (1 - progress) ** 4
            else:
                eased = progress / self.eased_value
            current_x = self.start_x + (self.target_x - self.start_x) * eased
            current_y = self.start_y + (self.target_y - self.start_y) * eased

        # Update element position
        self.element.x = int(current_x)
        self.element.y = int(current_y)

        return True

    def is_animating(self):
        """Check if an animation is currently in progress."""
        return self.pos_animating

    def cancel(self):
        """Cancel the current animation."""
        self.pos_animating = False


apple_sprites, apple_sprites_palette = adafruit_imageload.load(
    "/boot_animation_assets/apple_spritesheet.bmp"
)
f_sprites, f_sprites_palette = adafruit_imageload.load("/boot_animation_assets/f_spritesheet.bmp")
r_sprites, r_sprites_palette = adafruit_imageload.load("/boot_animation_assets/r_spritesheet.bmp")
u_sprites, u_sprites_palette = adafruit_imageload.load("/boot_animation_assets/u_spritesheet.bmp")
i_sprites, i_sprites_palette = adafruit_imageload.load("/boot_animation_assets/i_spritesheet.bmp")
t_sprites, t_sprites_palette = adafruit_imageload.load("/boot_animation_assets/t_spritesheet.bmp")
j_sprites, j_sprites_palette = adafruit_imageload.load("/boot_animation_assets/j_spritesheet.bmp")
j_sprites_palette.make_transparent(0)
a_sprites, a_sprites_palette = adafruit_imageload.load("/boot_animation_assets/a_spritesheet.bmp")
a_sprites_palette.make_transparent(0)
m_sprites, m_sprites_palette = adafruit_imageload.load("/boot_animation_assets/m_spritesheet.bmp")
m_sprites_palette.make_transparent(0)

default_sprite_delay = 1 / 35

main_group = Group()
main_group.x = display.width // 2 - BOX_SIZE[0] // 2 - 30
main_group.y = display.height // 2 - BOX_SIZE[1] // 2 - 31

sliding_group = Group()
main_group.append(sliding_group)

letters_x_start = 83
letters_y_start = display.height

apple_tilegrid = TileGrid(
    apple_sprites,
    pixel_shader=apple_sprites_palette,
    tile_width=73,
    tile_height=107,
    width=1,
    height=1,
)
f_tilegrid = TileGrid(
    f_sprites, pixel_shader=f_sprites_palette, tile_width=32, tile_height=39, width=1, height=1
)
r_tilegrid = TileGrid(
    r_sprites, pixel_shader=r_sprites_palette, tile_width=32, tile_height=39, width=1, height=1
)
u_tilegrid = TileGrid(
    u_sprites, pixel_shader=u_sprites_palette, tile_width=32, tile_height=39, width=1, height=1
)
i_tilegrid = TileGrid(
    i_sprites, pixel_shader=i_sprites_palette, tile_width=16, tile_height=39, width=1, height=1
)
t_tilegrid = TileGrid(
    t_sprites, pixel_shader=t_sprites_palette, tile_width=32, tile_height=39, width=1, height=1
)
j_tilegrid = TileGrid(
    j_sprites, pixel_shader=j_sprites_palette, tile_width=32, tile_height=39, width=1, height=1
)
a_tilegrid = TileGrid(
    a_sprites, pixel_shader=a_sprites_palette, tile_width=32, tile_height=39, width=1, height=1
)
m_tilegrid = TileGrid(
    m_sprites, pixel_shader=m_sprites_palette, tile_width=43, tile_height=39, width=1, height=1
)

coordinator = {
    "steps": [
        # Apple fly on
        {
            "type": "animation_step",
            "tilegrid": apple_tilegrid,
            "offscreen_loc": (0, -207),
            "onscreen_loc": (0, 21),
            "move_duration": 0.45,
            "overshoot_pixels": 1,
            "eased_value": None,
            "sprite_anim_range": (0, 11),
            "sprite_delay": 1 / 42,
            "start_time": 0.0,
            "sprite_anim_start": 0.347,
            "started": False,
        },
        # F fly on
        {
            "type": "animation_step",
            "tilegrid": f_tilegrid,
            "offscreen_loc": (letters_x_start, letters_y_start),
            "onscreen_loc": (letters_x_start, 67),
            "move_duration": 0.45,
            "overshoot_pixels": 20,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 0.45,
            "sprite_anim_start": 0.347,
            "started": False,
        },
        # R fly on
        {
            "type": "animation_step",
            "tilegrid": r_tilegrid,
            "offscreen_loc": (letters_x_start + 32 + 3 - 1, letters_y_start),
            "onscreen_loc": (letters_x_start + 32 + 3 - 1, 67),
            "move_duration": 0.45,
            "overshoot_pixels": 20,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 0.9,
            "sprite_anim_start": 0.347,
            "started": False,
        },
        # Left slide everything
        {
            "type": "animation_step",
            "tilegrid": sliding_group,
            "offscreen_loc": (100, 0),
            "onscreen_loc": (30, 0),
            "move_duration": 1.75,
            "overshoot_pixels": 0,
            "eased_value": 1,
            "sprite_anim_range": None,
            "sprite_delay": None,
            "start_time": 0.9,
            "sprite_anim_start": None,
            "started": False,
        },
        # U fly on
        {
            "type": "animation_step",
            "tilegrid": u_tilegrid,
            "offscreen_loc": (letters_x_start + (32 + 3) * 2 - 2, letters_y_start),
            "onscreen_loc": (letters_x_start + (32 + 3) * 2 - 2, 67),
            "move_duration": 0.45,
            "overshoot_pixels": 20,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 1.35,
            "sprite_anim_start": 0.347,
            "started": False,
        },
        # I fly on
        {
            "type": "animation_step",
            "tilegrid": i_tilegrid,
            "offscreen_loc": (letters_x_start + (32 + 3) * 3 - 3, letters_y_start),
            "onscreen_loc": (letters_x_start + (32 + 3) * 3 - 3, 67),
            "move_duration": 0.45,
            "overshoot_pixels": 20,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 1.8,
            "sprite_anim_start": 0.347,
            "started": False,
        },
        # T fly on
        {
            "type": "animation_step",
            "tilegrid": t_tilegrid,
            "offscreen_loc": (letters_x_start + (32 + 3) * 3 + 16 + 3 - 4, letters_y_start),
            "onscreen_loc": (letters_x_start + (32 + 3) * 3 + 16 + 3 - 4, 67),
            "move_duration": 0.45,
            "overshoot_pixels": 20,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 2.25,
            "sprite_anim_start": 0.347,
            "started": False,
        },
        # J fly on
        {
            "type": "animation_step",
            "tilegrid": j_tilegrid,
            "offscreen_loc": (letters_x_start, letters_y_start),
            "onscreen_loc": (letters_x_start, 50 + 39),
            "move_duration": 0.45,
            "overshoot_pixels": 4,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 2.7,
            # "sprite_anim_start": 0.347,
            "sprite_anim_start": 0.4,
            "started": False,
        },
        # A fly on
        {
            "type": "animation_step",
            "tilegrid": a_tilegrid,
            "offscreen_loc": (letters_x_start + 32 + 3 - 1, letters_y_start),
            "onscreen_loc": (letters_x_start + 32 + 3 - 1, 50 + 39),
            "move_duration": 0.45,
            "overshoot_pixels": 4,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 3.15,
            "sprite_anim_start": 0.4,
            "started": False,
        },
        # M fly on
        {
            "type": "animation_step",
            "tilegrid": m_tilegrid,
            "offscreen_loc": (letters_x_start + 32 + 3 + 32 + 2 - 1, letters_y_start),
            "onscreen_loc": (letters_x_start + 32 + 3 + 32 + 2 - 1, 50 + 39),
            "move_duration": 0.45,
            "overshoot_pixels": 4,
            "eased_value": None,
            "sprite_anim_range": (0, 15),
            "sprite_delay": default_sprite_delay,
            "start_time": 3.6,
            "sprite_anim_start": 0.4,
            "started": False,
        },
    ]
}

for step in coordinator["steps"]:
    if isinstance(step["tilegrid"], TileGrid):
        sliding_group.append(step["tilegrid"])
        step["default_palette"] = step["tilegrid"].pixel_shader
    step["tilegrid"].x = step["offscreen_loc"][0]
    step["tilegrid"].y = step["offscreen_loc"][1]
    step["animator"] = OvershootAnimator(step["tilegrid"])

# F bounce up from J impact
coordinator["steps"].insert(
    8,
    {
        "type": "animation_step",
        "tilegrid": coordinator["steps"][1]["tilegrid"],
        "animator": coordinator["steps"][1]["animator"],
        "offscreen_loc": (letters_x_start, letters_y_start),
        "onscreen_loc": (letters_x_start, 52),
        "move_duration": 0.3,
        "overshoot_pixels": 22,
        "eased_value": None,
        "sprite_anim_range": (19, 27),
        "sprite_delay": 1 / 22,
        "start_time": 3.0,
        "sprite_anim_start": 0.15,
        "started": False,
    },
)
# R bounce up from A impact
coordinator["steps"].insert(
    10,
    {
        "type": "animation_step",
        "tilegrid": coordinator["steps"][2]["tilegrid"],
        "animator": coordinator["steps"][2]["animator"],
        "offscreen_loc": (letters_x_start + 32 + 3 - 1, letters_y_start),
        "onscreen_loc": (letters_x_start + 32 + 3 - 1, 52),
        "move_duration": 0.3,
        "overshoot_pixels": 22,
        "eased_value": None,
        "sprite_anim_range": (19, 27),
        "sprite_delay": 1 / 22,
        "start_time": 3.45,
        "sprite_anim_start": 0.15,
        "started": False,
    },
)
# U bounce up from M impact
coordinator["steps"].append(
    {
        "type": "animation_step",
        "tilegrid": coordinator["steps"][4]["tilegrid"],
        "animator": coordinator["steps"][4]["animator"],
        "offscreen_loc": (letters_x_start + (32 + 3) * 2 - 2, letters_y_start),
        "onscreen_loc": (letters_x_start + (32 + 3) * 2 - 2, 52),
        "move_duration": 0.3,
        "overshoot_pixels": 22,
        "eased_value": None,
        "sprite_anim_range": (19, 27),
        "sprite_delay": 1 / 22,
        "start_time": 3.9,
        "sprite_anim_start": 0.15,
        "started": False,
    },
)
# I bounce up from M impact
coordinator["steps"].append(
    {
        "type": "animation_step",
        "tilegrid": coordinator["steps"][5]["tilegrid"],
        "animator": coordinator["steps"][5]["animator"],
        "offscreen_loc": (letters_x_start + (32 + 3) * 3 - 3, letters_y_start),
        "onscreen_loc": (letters_x_start + (32 + 3) * 3 - 3, 52),
        "move_duration": 0.3,
        "overshoot_pixels": 22,
        "eased_value": None,
        "sprite_anim_range": (19, 27),
        "sprite_delay": 1 / 22,
        "start_time": 4.00,
        "sprite_anim_start": 0.15,
        "started": False,
    },
)
# T bounce up from M impact
coordinator["steps"].append(
    {
        "type": "animation_step",
        "tilegrid": coordinator["steps"][6]["tilegrid"],
        "animator": coordinator["steps"][6]["animator"],
        "offscreen_loc": (letters_x_start + (32 + 3) * 3 + 16 + 3 - 4, letters_y_start),
        "onscreen_loc": (letters_x_start + (32 + 3) * 3 + 16 + 3 - 4, 52),
        "move_duration": 0.3,
        "overshoot_pixels": 22,
        "eased_value": None,
        "sprite_anim_range": (19, 27),
        "sprite_delay": 1 / 22,
        "start_time": 4.1,
        "sprite_anim_start": 0.15,
        "started": False,
    },
)
# color red
coordinator["steps"].append(
    {
        "start_time": 4.75,
        "type": "change_palette",
        "new_palette": "red_palette",
        "color": 0xFF0000,
        "started": False,
    }
)
# color yellow
coordinator["steps"].append(
    {
        "start_time": 5,
        "type": "change_palette",
        "new_palette": "yellow_palette",
        "color": 0xFFFF00,
        "started": False,
    }
)
# color teal
coordinator["steps"].append(
    {
        "start_time": 5.25,
        "type": "change_palette",
        "new_palette": "teal_palette",
        "color": 0x00FFFF,
        "started": False,
    }
)
# color pink
coordinator["steps"].append(
    {
        "start_time": 5.5,
        "type": "change_palette",
        "new_palette": "pink_palette",
        "color": 0xFF00FF,
        "started": False,
    }
)
# color blue
coordinator["steps"].append(
    {
        "start_time": 5.75,
        "type": "change_palette",
        "new_palette": "blue_palette",
        "color": 0x0000FF,
        "started": False,
    }
)
# color green
coordinator["steps"].append(
    {
        "start_time": 6.00,
        "type": "change_palette",
        "new_palette": "green_palette",
        "color": 0x00FF00,
        "started": False,
    }
)
# Apple eyes blink
coordinator["steps"].append(
    {
        "type": "animation_step",
        "tilegrid": coordinator["steps"][0]["tilegrid"],
        "animator": coordinator["steps"][0]["animator"],
        "offscreen_loc": (0, -207),
        "onscreen_loc": (0, 21),
        "move_duration": 0.01,
        "overshoot_pixels": 0,
        "eased_value": None,
        "sprite_anim_range": (12, 27),
        "sprite_delay": 1 / 32,
        "start_time": 6.65,
        "sprite_anim_start": 0.0,
        "started": False,
    }
)
# Apple eyes blink again
coordinator["steps"].append(
    {
        "type": "animation_step",
        "tilegrid": coordinator["steps"][0]["tilegrid"],
        "animator": coordinator["steps"][0]["animator"],
        "offscreen_loc": (0, -207),
        "onscreen_loc": (0, 21),
        "move_duration": 0.01,
        "overshoot_pixels": 0,
        "eased_value": None,
        "sprite_anim_range": (12, 18),
        "sprite_delay": 1 / 32,
        "start_time": 8.75,
        "sprite_anim_start": 0.0,
        "started": False,
    }
)

display.root_group = main_group

start_time = time.monotonic()

if tlv320_present:
    fjPeriphs.play_file(wave_file, False)

while True:
    now = time.monotonic()
    still_going = True

    for i in range(len(coordinator["steps"])):
        step = coordinator["steps"][i]
        if now - start_time >= step["start_time"]:
            if not step["started"]:
                step["started"] = True
                if step["type"] == "animation_step":
                    if step["sprite_anim_range"] is not None:
                        step["animator"].animate_to(
                            *step["onscreen_loc"],
                            duration=step["move_duration"],
                            overshoot_pixels=step["overshoot_pixels"],
                            start_sprite_anim_at=step["sprite_anim_start"],
                            sprite_from_index=step["sprite_anim_range"][0],
                            sprite_to_index=step["sprite_anim_range"][1],
                            sprite_delay=step["sprite_delay"],
                            eased_value=step["eased_value"],
                        )
                    else:
                        step["animator"].animate_to(
                            *step["onscreen_loc"],
                            duration=step["move_duration"],
                            overshoot_pixels=step["overshoot_pixels"],
                            eased_value=step["eased_value"],
                        )
                elif step["type"] == "change_palette":
                    # color_sweep_all(step["color"], delay=0)
                    for _cur_step in coordinator["steps"]:
                        if "tilegrid" in _cur_step and isinstance(_cur_step["tilegrid"], TileGrid):
                            _cur_step["tilegrid"].pixel_shader[1] = step["color"]

            if "animator" in step:
                if i == len(coordinator["steps"]) - 1:
                    still_going = step["animator"].tick()
                else:
                    step["animator"].tick()
            elif i == len(coordinator["steps"]) - 1:
                still_going = False
    # display.refresh(target_frames_per_second=TARGET_FPS)
    display.refresh()

    if not still_going:
        break

if tlv320_present:
    while fjPeriphs.audio.playing:
        pass

supervisor.set_next_code_file("code.py")
supervisor.reload()
View on GitHub

Page last edited June 17, 2025

Text editor powered by tinymce.

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.

Play Video: CircuitPython Implementations of Classic Startup Screens

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.

Download Project Bundle
Copy Code 
# SPDX-FileCopyrightText: 2025 Tim Cocks for Adafruit Industries
# SPDX-License-Identifier: MIT
import time
from audiocore import WaveFile
import audiobusio
import board
from displayio import Group, TileGrid, Bitmap, Palette
import supervisor
import adafruit_imageload
import adafruit_tlv320
from adafruit_fruitjam.peripherals import request_display_config


# how long between animation frames
ANIMATE_INTERVAL = 1 / 45

background_color = 0xE1F7CE

i2c = board.I2C()
dac = adafruit_tlv320.TLV320DAC3100(i2c)
dac.configure_clocks(sample_rate=44100, bit_depth=16)
# for headphone jack ouput
dac.headphone_output = True
dac.headphone_volume = -15  # dB
# for speaker JST output
# dac.speaker_output = True
# dac.speaker_volume = -15  # dB

wave_file = open("gameboy_startup/gameboy_pling.wav", "rb")
wave = WaveFile(wave_file)
audio = audiobusio.I2SOut(board.I2S_BCLK, board.I2S_WS, board.I2S_DIN)

# display setup
request_display_config(320, 240)
display = supervisor.runtime.display

# group to hold all visual elements
main_group = Group()

# Bitmap for background color
bg_bmp = Bitmap(display.width // 20, display.height // 20, 1)
bg_palette = Palette(1)
bg_palette[0] = background_color
bg_tg = TileGrid(bg_bmp, pixel_shader=bg_palette)

# group to scale the background bitmap up to display size
bg_group = Group(scale=20)
bg_group.append(bg_tg)
main_group.append(bg_group)

# Bitmap for logo
logo, palette = adafruit_imageload.load("gameboy_startup/gameboy_logo.bmp")
logo_tg = TileGrid(logo, pixel_shader=palette)
main_group.append(logo_tg)

# place it in the center horizontally and above the top of the display
logo_tg.x = display.width // 2 - logo_tg.tile_width // 2
logo_tg.y = -logo_tg.tile_height

# y pixel location to stop logo at
STOP_Y = display.height * 0.4 - logo_tg.tile_height // 2


display.root_group = main_group
time.sleep(1.5)
last_animate_time = time.monotonic()
played_audio = False
display.auto_refresh = False
while True:
    now = time.monotonic()

    # if it's time to animate and the logo isn't to the
    # stopping position yet
    if last_animate_time + ANIMATE_INTERVAL <= now and logo_tg.y < STOP_Y:

        # update the timestamp
        last_animate_time = now
        # move the logo down by a pixel
        logo_tg.y += 1
        display.refresh()

    # if the logo has reached the stop position
    if logo_tg.y >= STOP_Y and not played_audio:
        played_audio = True
        # play the audio pling
        audio.play(wave)
        while audio.playing:
            pass
View on GitHub

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.

Download Project Bundle
Copy Code 
# SPDX-FileCopyrightText: 2025 Tim Cocks for Adafruit Industries
# SPDX-License-Identifier: MIT
import time
from audiocore import WaveFile
import audiobusio
import board
import supervisor
from displayio import Group, TileGrid, OnDiskBitmap
import adafruit_tlv320
from adafruit_fruitjam.peripherals import request_display_config
from adafruit_progressbar.horizontalprogressbar import (
    HorizontalFillDirection,
    HorizontalProgressBar,
)

# DAC setup
i2c = board.I2C()
dac = adafruit_tlv320.TLV320DAC3100(i2c)
dac.configure_clocks(sample_rate=44100, bit_depth=16)

# for headphone jack ouput
dac.headphone_output = True
dac.headphone_volume = -15  # dB
# for speaker JST output
# dac.speaker_output = True
# dac.speaker_volume = -15  # dB

# Chime audio setup
wave_file = open("mac_startup/mac_chime.wav", "rb")
wave = WaveFile(wave_file)
audio = audiobusio.I2SOut(board.I2S_BCLK, board.I2S_WS, board.I2S_DIN)

# Display setup
request_display_config(640, 480)
display = supervisor.runtime.display
display.auto_refresh = False

# group to hold visual all elements
main_group = Group()
display.root_group = main_group
display.refresh()

# background image
bg_bmp = OnDiskBitmap("mac_startup/mac_startup_bg.bmp")
bg_tg = TileGrid(bg_bmp, pixel_shader=bg_bmp.pixel_shader)
main_group.append(bg_tg)

# Icons for bottom left
icons = []
for i in range(6):
    odb = OnDiskBitmap("mac_startup/mac_startup_icon{0}.bmp".format(i))
    tg = TileGrid(odb, pixel_shader=odb.pixel_shader)
    icons.append(
        {
            "bmp": odb,
            "tg": tg,
        }
    )
    tg.x = 10 + ((33 + 8) * i)
    tg.y = display.height - tg.tile_height - 10
    tg.hidden = True
    if i < 5:
        odb.pixel_shader.make_transparent(0)
    main_group.append(tg)

# progress bar in the welcome box
progress_bar = HorizontalProgressBar(
    (147, 138),
    (346, 7),
    direction=HorizontalFillDirection.LEFT_TO_RIGHT,
    min_value=0,
    max_value=800,
    fill_color=0xC7BEFD,
    outline_color=0x000000,
    bar_color=0x3F3F3F,
    margin_size=0,
)
main_group.append(progress_bar)

# play the chime sound
audio.play(wave)
while audio.playing:
    pass

# start drawing the visual elements
display.auto_refresh = True
time.sleep(1)
start_time = time.monotonic()

while True:
    elapsed = time.monotonic() - start_time

    # if we haven't reached the end yet
    if elapsed * 100 <= 800:
        # update the progress bar
        progress_bar.value = elapsed * 100

    else:  # reached the end animation
        # set progress bar to max value
        progress_bar.value = 800

    # loop over all icons
    for index, icon in enumerate(icons):
        # if it's time for the current icon to show, and it's still hidden
        if (elapsed - 1) > index and icon["tg"].hidden:
            # make the current icon visible
            icon["tg"].hidden = False
View on GitHub

Page last edited June 17, 2025

Text editor powered by tinymce.

Related Guides
Adafruit Fruit Jam
By Liz Clark
beginner
Saving CircuitPython Bitmaps and Screenshots
By Dave Astels
beginner
Proximity Based Lighting
By Dave Astels
intermediate
Digital Clock with CircuitPython
By Ruiz Brothers
intermediate
Adafruit GPIO Expander Bonnet for Raspberry Pi
By Liz Clark
beginner
Adafruit INA23x DC Current Voltage Power Monitor
By Liz Clark
beginner
Cooperative Multitasking in CircuitPython with asyncio
By Dan Halbert
advanced
3D Print Ratcatcher 2 Controller Device
By Ruiz Brothers
beginner
CircuitPython Servo Tester
By Dave Astels
beginner
Adafruit MCP9601 I2C Thermocouple Amplifier
By Kattni Rembor
beginner
Three Button Foot Switch
By Ruiz Brothers
beginner
Using Circuit Playground Express, MakeCode and...
By Anne Barela
beginner
Christmas Soundboard with NeoTrellis M4
By Dano Wall
beginner
Custom HID Devices in CircuitPython
By Dan Halbert
intermediate
Ambient Color Control Pad
By John Park
beginner
Neo Trinkey Zoom Shortcuts
By Liz Clark
beginner
Search

Search

Categories