ChronoGlass: DIY Transparent Animated Timepiece:

Hello reader.

In this 'Build in a Day' Instructable, we will go through the process on building this transparent clock display which uses simple tools, basic materials and an old Android tablet. The basic principle of this is a tablet resting on top of a frame with an angled sheet of glass that the tablet's screen reflects on to. The clock faces are made using a PC draw/paint program so you can be as creative as you want, animations using free website tools and an app to not only run the clock display, but also used as a set of tools to further build on the clock design. To help with the software side of things, I have made a video to accompany this Instructable, not just as a showcase, but to show how I made, animated and set up the clocks because I know that some makers prefer watching how to use unfamiliar software. The clock making, animating and setup walkthrough starts at around the 5:01 mark.

The Project:

A simplistic modern design frame that houses a tablet PC that reflects the screen onto a sheet of glass to make a transparent clock of your own design, both visible during the day and night. The main components for this are two identical picture frames with glass, some vinyl wrap to make it look pretty and an old Android tablet. There are many many tablets available, you may have one buried away in a draw, you can get incredibly cheap ones new and working used online, and working ones can be found on the freebie websites that people are giving away for free. To make the clock faces, any computer paint/draw programs or apps can be used to draw your own clock face designs (day modes, night modes, funny, themed etc.), and to take things further there are free online tools to animate your designs. Making the clock face backgrounds or other elements black make them invisible, and bright colours and tones for the other elements, hands, numbers etc. gives the whole design a holographic style look. A simple Android app runs the show which apart from giving you the actual ticking clocks (both analogue and digital), also gives you additional tools to add to your clock designs. For this clock, I made multiple clocks designs for its new owner (see below), which can be changed by simply swiping the screen. And they will have the ability to make their own designs to suit their tastes and needs.

The Inspiration:

At the time of writing this (mid October 2025), Christmas is now fast approaching so I'm starting to think of making things for the people close to me for gifts. I do purchase prezzies for people but I do like to make things for a more personal touch too. At the moment I have two clock designs, this one and another wall/shelf clock you can find by clicking here. I made this clock for someone who likes Sci-Fi and gadgets, so hopefully it should go down a treat for them. I made myself a holographic style AI assistant display very similar to this which turned out really well, so making a clock in this style I knew would work really well too.

I have been using a used cheap tablet purely as a CCTV monitor that has been running 12 hours a day, almost every day for the past 4 years without any issue, so doing the same as an always on clock would not be an issue.

Fun Fact:

Why do analogue timepieces go in the direction they do (clockwise)? Because early clocks were modeled after sundials in the Northern Hemisphere, where the sun’s shadow moves from left to right across the dial. When mechanical clocks were invented, their hands copied that same motion what we call 'clockwise'. There was little reason to change this standard in the Southern Hemisphere, but if clocks had been invented there, where the sun's shadow on a sundial runs from right to left (counter-clockwise), clockwise would indeed run the other direction. History, it seems, is a matter of latitude as much as time.

Tick Tock - Tick Tock, lets go make a clock...

Tools:

1. Nail gun (or hammer and tack nails)
2. Pencil
3. Ruler
4. A hammer
5. Hobby knife
6. Cutting board
7. Pliers
8. A saw to cut small lengths of wood
9. Sanding block (or paper)
10. Cross head or straight head screwdriver for the glass brackets
11. Drill/driver with small drill bit and screwdriver bit and screws
12. Hot glue gun or PVA glue for gluing foam core
13. Computer or tablet to draw/animate the clock faces

Software:

1. A paint/draw program or app (Paint.net is a good free PC program)
2. Adobe Express (for the animations)
3. Ezgif.com (video to GIF converter)
4. Total Launcher app for Android

Materials:

1. 2 x A4 size picture frames in black
2. A pair of Glass cabinet door brackets
3. Some small pieces of MDF (or similar wood)
4. Black vinyl wrap (I used a roll with a wood grain effect)
5. A3 size sheet of foam core (preferably black)
6. 10 inch Windows tablet. You can get away with an 8 inch tablet but the images will be smaller, but if you're okay with that you could make a smaller frame with smaller picture frames. If you use an old used tablet, it doesn't matter if the Bluetooth is not working, the casing is marked or scuffed, sound doesn't work or the battery doesn't hold a charge. As long as the touchscreen works, it has Wi-Fi for downloading apps, the gyro/accelerometer functions (screen rotation) and it powers up and stays on when connected to a power source, that's all you really need.

For this project I am using an old Amazon Fire HD10 tablet I no longer use. If you intend to use a Fire tab, you'll need to install Google paly services. Follow the instructions found here and you should be good to go. Not an overly difficult task if you follow the directions exactly as written.

The links I have listed above are U.K links, as that's where I'm from, and are not affiliated,. I have provided them to be a helpful reference so you can purchase similar items in your location.

List of the following steps:

1. Step 1: The Design.
2. Step 2: Starting the Frame Construction.
3. Step 3: Finishing the Frame Construction.
4. Step 4: Designing & Drawing the Clock Faces.
5. Step 5: Animating the Clock Faces.
6. Step 6: Setting Up Your New ChronoGlass Clock.
7. Step 7: Conclusion.

Build Time:

1. 1 day - two to three hours for the frame, simple animated clock faces around an hour, more complex animated clock faces will take longer depending on skill level, design/details, and how many clock faces you want to make.

The Frame:

1. Using 2 A4 sized picture frames for the base and top to hold the tablet PC, the glass from one frame to use as the adjustable transparent display, and using one of the hardboard backing panels to rest the tablet on. The middle would be cut out for the tablet's screen to be visible on the glass.
2. The front of the bottom frame would be facing up as this was the nicer looking side. And the front of the top frame would face down and house the tablet PC.
3. Two scrap pieces of 15mm MDF would make the side supports which would be fitted between the two frames.
4. The glass panel would fit into holes drilled half way up the side panels with pivoting brackets to adjust the glass angle if needed.
5. A front hinged foot rest would be fitted to the bottom frame to raise the front of the display up for better viewing angles if needed.
6. To finish off, a foam core lid would cover the back of the tablet to make the whole display look neater.
7. The whole frame is black so it has a sleek modern during the day, and not really noticeable at night.

Clock Faces:

1. Made using a paint program or app, the simplest clock faces are simply a static image but having any numbers properly located for the clock hands to show the time accurately.
2. The more complex faces start as static images as above, but then animated and saved as a GIF file.
3. Using black as the image backgrounds so these areas become fully transparent (invisible) when reflected onto the glass, darker colours and shades are semi-transparent yet still visible (less glare so good for night time). Bright colours and shades are used for high visibility (vibrant and good for day time).
4. Images/GIFS are then transferred to the tablet, then use the Total Launcher (TL) app to load the images and add the built in clock hands widget. Here we can also change the clock hand colours and size, add additional images or GIFs, use the digital clock readout format, add the date (in a format of your choice).
5. Finally, use the TL rotation tool to reverse the clock faces, hands, date and anything else. This is a 'MUST DO' task so the 180 degree rotation (mirroring effect) correctly displays the clock onto the display glass.

1. Dismantle the picture frames, put the pieces to one side except for one glass panel and grab the pivot hinges.
2. Attach the pivot hinge to the glass making sure the pivot pin is about half way up the glass, and equal to each other. Tighten the screws only pinch tight so as not to crack the glass. Put to one side for now.
3. With one of the backing panels, remove any bits like wall hanger clips and fold out stands. Gentilly pry them off with a flat head screwdriver.
4. Measure the size of the tablet's viewable screen, not the bezel, and mark out these measurements onto the backing panel. We want to end up with a perfectly aligned rectangle draw mark in the middle of the panel the size of the screen. Then use a sharp knife and metal ruler or cutting edge to repeatedly score the lines until it cuts through. Test fit the cut out panel on top of the tablet to make sure all of the screen is fully visible
5. Cut two pieces of 15mm MDF or similar (5cm wide and 23cm tall), then vinyl wrap all four sides (not the top and bottoms).
6. Measure and mark the center of both pieces, then drill a hole through both. The drill but needs to be a slightly smaller diameter than the glass hinge pivot pin so it is a tight push fit with a gentil tap of a hammer.
7. Measure and mark the center of both sides of each picture frame, and the width on both MDF pieces.
8. Nail one of the MDF pieces to one of the frames making sure the outside edges of the frame and MDF piece are flush and the pencil marks lined up. Add an optional drop of glue for extra strength before nailing together. Do the same for the other side.
9. Now grab the glass with the attached hinges, place one pivot hinge into the fixed MDF side panel firmly pushing it in, then do the other. With the frame laying on one side, gently tap the MDF side panels with a hammer to firmly push both pivot pins in as far as they will go, but not so hard as to risk breaking the glass.
10. Flip the stand over then glue and nail in the other picture frame, this time with the picture frames front facing down (this will be the top of the display stand where the tablet sits).

Top Tips:

In stage 8, nailing the first MDF piece to the first picture frame can be a little tricky. Use a vice, clamps, use the other MDF piece as a support, or get someone to hold the picture frame in place while you can make sure is is lined up and nail it in. The rest will be much easier.

If using a nail gun, you may need to hammer down any protruding nail heads to make them flush.

That is the main part of the stand done. The glass should be tight against the MDF side panels and have a stiff movement, enough for it to be moved and hold its position.

1. With the tablet resting securely on top of its resting base and aligned so the screen isn’t obscured, measure the gap between the inner frame edge and the sides of the tablet. Cut a foam core strip to fit, mark and cut holes for the mic and power ports, color it black (optional), and hot glue it in place.
2. Cut two more side strips, color and glue them to the tablet resting base to keep the tablet stable and properly aligned.
3. For the foot rest, cut an L-profile or piece of strip wood the width of the stand, glue or screw two long L-brackets to it, then screw the brackets into the sides of the stand’s base. Keep the screws snug so the foot rest can pivot but hold its position.
4. To make the removable lid, cut a Foamcore sheet slightly larger than the frame for a snug overlap. Cut and glue matching side and end strips to form a shallow box. Optionally wrap the lid in black vinyl or use black foam core.
5. If you want to hide the tablets power cable, plug it into the tablet while it is resting in the frame, then trace the cable around the tablets securing strips (stage's 1 and 2), then trace it down one of the side supports hiding it with a little extra vinyl wrap.
6. Finally, clean the glass thoroughly to remove any dust or fingerprints before assembly.

Layers... a word that you will see a lot of in the following three steps. In regards to this project, layers refers to adding one image, gif, clock widget on top of another. Even a simple clock with a static face image will be layered once with the clock hands widget in TL (Total Launcher app), placed on top on the clock face image. As an example, the gold clock with moving cogs seen above has seven layers, the individual cogs, with an eighth layer being the hands widget added later in TL. But more on that later.

But first we need to make the clock faces. There's two ways to do this, for an analogue we make a clock face, for a digital format clock we make a design leaving a space to add the digital clock in later with TL.

To draw a clock face is as it sounds, you simply draw a clock face to your own design. But there are some tips you need to follow to make it readable on a transparent display and to have it read accurately.

1. As I mentioned in Step 1, using black as the image backgrounds become fully transparent (invisible) when reflected onto the glass, where darker colours and shades are semi-transparent yet still visible (less glare so good for night time). Bright colours and shades are used for high visibility (vibrant and good for day time).
2. For the best quality images, use your tablets Resolution specs, for example 1920 x 1200, and use these numbers for the canvas size (in pixels) in your paint program. As the tablet will be in portrait mode, the height will be the larger number than the width.
3. The clock face design is totally up to you, but you will want it to be accurate. There is a tool in TL which will help align the clock hand widget perfectly with your clock face, but some small things need to be done on your part first. First thing, for an analogue clock face, you will want the clock numbers to be correctly positioned so the hands will point to them correctly.
4. Make a template by either using gridlines if you paint program has this option to correctly lay out each minute marker,
5. You can take a photo or a screen grab of a real clock, insert it to a blank drawing project and place your minute maters around it, then delete or erase the clock image
6. Or you can simply use the template I made attached to the above pictures.
7. And for animated faces, you will need to make some separate images, or layers. Just like the gold cogs I mentioned earlier, anything you want to move separately from the clock face needs to be its own standalone image which will be added in the next step.
8. Finally, when the drawings are finished, before saving them you will want to make sure they are in the middle of the canvas as much as possible and crop out any blank background you don't need. Making sure the clock faces are centered in the middle of the canvas/background will help with the clock hand widget alinement I mentioned above in stage 3.

NOTE: I mentioned at the end of step 1 about rotating the clock to a mirror image to display correctly onto the glass. You could do it here before saving the image file, but it will be much quicker and easier doing this in TL, so this will be done during setup in Step 6.

To animate our clock faces, Adobe Express is the weapon of choice here as it has the basic animations needed for this project, and at the time of writing this, it's free. There is a paid for version that has more features and offers a free trial, but the free basic options are all that's needed. Of course there are other animation programs and apps you can use. The '>' symbol used below means 'and then', for example "do this, and then (>), do that".

1. Open Adobe Express > click the blue ‘Go to Adobe Express’ button > ‘Start from your content’ > double click on your clock face image to upload it > Click ‘Edit original image’ > resize the clock face to its maximum size > click on the ‘Background Colour’ icon (the plain square icon which should be set to default white) and choose black.
2. Now tap 'Upload' and choose the image you want to animate. Resize and position it to the size and location you want.
3. Now click ‘Animation’ > tap 'Loop' > tap the animation you want > tap the animation button you chose again to bring up the settings and adjust the speed, direction etc. to what you want.
4. If you want to add multiple moving images, follow stages 2 and 3 above for each image/layer.
5. Then click the ‘Download’ button (top right corner) > change the file format to 'GIF' > and select the quality to 'High quality'.

Top Tips:

The default timing (the length of the GIF) is set to 5 seconds thereabouts. But when adding multiple animated layers and changing the settings, you will need to adjust the timeline by dragging it so all of the layers in the GIF loops perfectly without any stutters or jumps when the loop ends and restarts.

It takes a little practice especially for multiple moving layers, but can be done by double check the ‘Speed’ and ‘Intensity’ settings of your chosen animation to make sure the start and end points match otherwise you will get an unmatched, jittery animation that doesn't loop properly. So either adjust the setting sliders of hover the computers pointer over the end of the video timeline and drag it to either extend or shorted the clip, test play it and make sure the start and end points match before you download.

With the clock face GIF finished, send them over to the tablet via file transfer, SD card or even email it to yourself and download to the tablets files app. We now need to Install and set up the Total Launcher app. This is an app where you can create your own launcher, you know your home pages on your phone/tablet where all of your apps and clock/weather widgets are. But you can use it as a standalone app which is great for this project. All of the available selections on TL, images, text, widgets etc. I will refer to as 'Elements'. Hold the tablet in portrait mode throughout this step.

1. Open Total Launcher then press and hold on an empty space until the page shrinks down. Click on 'Edit Off' to toggle it On. Press and hold on all of the default elements on the screen and tap the delete bin icon to start with a blank canvas. Swipe across the screen to the other pages and do the same.
2. Press and hold on an empty space until the page shrinks down and while at this stage click on the middle square icon (looks like a little mountain) and click on the portrait image. Click on 'Colour' and then choose black with the transparency slider on the bottom of the slider bar.
3. Click on the blank picture then select 'Stretch to fit screen' then name it "Clock 1". To add a second clock, swipe across the screen, make a new page, name it 'Clock 2' and again set the portrait background to the colour black. Then click on it to bring the screen forward.
4. Click on the top right Plus icon (+) > 'Graphic' > 'Image' > 'Default' > 'Image' >the Plus (+) icon (bottom right corner), find your clock face GIF where it is saved on your tablet ('Downloads' if you downloaded it or 'Storage' if on a memory card), then click on it to add it to your Total Launcher picture library. Then tap in the clock face GIF and resize it to fill the screen.
5. Now again tap the Plus icon (+) > 'Widget' > 'Analog Clock', then move and resize it to fit the clock face GIF.
6. With the analog clock widget still highlighted, tap on the cog icon at the top of the screen, and here you can change the clock hand colours. Then tap on 'Background' > 'Colour', and slide the transparency slider al the way up (full transparency), > tap 'OK', then tap the tablets 'Back' button twice to save the changes.
7. Here is where we flip things around. Tap and hold the clock face widget until it highlights, then tap on the icon that is a half arrow circle with a diamond, found at the bottom right of the screen. Slide the bottom slider all the way to the right or left to rotate the face. tap the back button twice to exit and save, then do the same thing for the clock hands widget.
8. For good practice, click on a blank spot on any page, then tap 'Menu' > 'Backup center'. Click the plus icon to add a new backup of your new launcher layout.

You can follow the same stages (4 to 7) to add other clocks on different pages. When you are finished, tap the 'Edit On' icon to turn the editing option Off. Then you can place the tablet onto the frame, put the lid on and sit back and admire your new ChronoGlass. Simply swipe the screen left or right to change the clock styles if you have more than one.

Top Tip:

Tablets generally have a screen 'Time Out' which can be set anywhere from a few seconds up to 30 minutes or so, obviously not great for an 'Always On' clock.

To get around this we will need to get into the tablets 'Developer Options'. To do this, open the tablets 'Settings' app, and search for the tablets 'Build Number' usually found under 'About Tablet' or similar. Tap the build number seven times or so, return to the previous screen and you should now see the new 'Developer Options' tab. Tap on this and look for 'Stay Awake' and toggle it to 'On'. This will now keep the screen on while it is plugged into a power source until you manually turn it off by putting the tablet to sleep or powering it off.

With Total Launcher, you can add a digital clock format as well as or instead of the analogue one...

1. Click on the top right Plus icon (+) > 'Graphic' > 'Text' > 'Default' > 'the Cog icon' > 'Text' > 'Date/Time'. The text field will now automatically be filled with a default date format which should look like this... MMMM d,yyyy. Tap on the text field, delete the text and type in HH:mm for a 24 hour digital clock, or hh:mm for a 12 hour format then tap 'OK'. Choose your typeface, text colour, text size etc. then tap the back button twice to save and exit the editor. You can also add a duplicate time text and add the date as well. You can also download new text typeface/fonts from reputable online websites and use them in TL as well to customise your clocks even further.

In regards to the Instructables robot clock, this used three layers assembled in this order... adding the clock face first, then adding the clock hands widget, and finally a transparent background GIF of our friendly robot moving back and forwards. The reason I did it this way was to not have the clock hands fully covering the robot as I didn't like the way it looked, but having the hands behind the robot with the ends of the clock hands resized so the ends were visible looked much better and yet still practical.

For some reason, I had issues making a GIF with a transparent background using Adobe Express, so here's how I got around it.

1. In Adobe, instead of saving the animation as a GIF, I saved it as an MP4 video then used another free website tool, EZGif, converted the MP4 into a GIF then used their background removal tool to set the background to transparent... problem solved.

And that brings us to the end of this project. The clock face GIFs I made and attached to Step 5 were my first passes at making clock faces for the ChronoGlass and at time of writing this, I am working on more detailed ones more suited for its new owner. Please feel free to download and use them if you like them, and if you have any questions in regards to making your own, or for any other project related questions, please leave them in comments and I will try to answer where I can. I hope that you enjoyed this project and please let me know if you make your own ChronoGlass.

Thanks for reading, and happy making.