How do I make a clock face point to the Qibla without ruining the flow of my layout?

Hi everyone,

I’ve been using Kustom for quite a while now and I love turning my homescreen into something that feels meaningful and expressive. I like creating setups that serve more than just visual beauty—they have to work with how I live, too. Lately I’ve been exploring the idea of combining time and direction into one component. My first thought was using a classic analog clock face to do more than just tell time. I wanted it to also reflect direction—specifically, to show the Qibla in a quiet, non-intrusive way.

I started by adding a small marker to the clock interface that could rotate and indicate direction based on my current position. I tried using $wi(dir)$ and location globals, hoping I could anchor a shape to reflect orientation. But as soon as I did, I ran into a problem—the movement of the marker felt weirdly separate from the rest of the design. It was like having two conflicting ideas stuck together. The clock would tell time beautifully, but the Qibla marker felt like it was crashing the party. It didn’t move smoothly, and when it did, it threw off the visual balance of the widget.

I tried placing it behind the hands, then outside the rim, even overlapping the second hand. Each version felt off. Sometimes the marker was too distracting, and other times it was so subtle that I forgot it was there. What I really want is something that feels effortless—where the time and direction both coexist on the same face, like a single living element instead of stitched-on layers.

I was inspired by a web-based Qibla finder I came across recently, which offered a smooth and calming user experience. It used my browser’s location and compass data to gently rotate a simple compass interface, guiding me toward the right direction for prayer. This kind of Qibla direction service (خدمة تحديد القبلة) is incredibly meaningful to me—not just because it serves a religious purpose, but because it does so in a way that feels peaceful and unobtrusive. The needle didn’t flash or buzz; it just quietly oriented itself, almost like a silent companion. That interaction really stuck with me, and I’ve been trying to recreate that same kind of intuitive flow in my Kustom design—something that quietly points me in the right direction without needing to shout for attention.

So now I’m stuck. Is there a better way to represent directional rotation in a clock-style layout without making it feel off-balance? Maybe I’m thinking too literally. I even thought about letting the background shift slightly in hue depending on the direction I’m facing, like a soft compass that appears behind the main layer, but fades into the design unless I need it. Another idea was hiding the direction cue completely and making it show only when I tap or swipe. That way it doesn’t interfere with my daily glance-at-the-time habit but is still there when I want it.

Has anyone tried blending compass data with clocks in this way? Not with a full-on compass widget, but more of a hybrid—a living timepiece that quietly offers direction. I’m curious how others deal with movement and rotation when you want to preserve harmony in the layout. Would love to hear from anyone who’s done something similar—or even if you’ve faced the same design frustrations.