Tenstorrent Switch

First Published: 2025-10-01

Last Updated: 2025-10-01

That one time I got nerdsniped by a switch.

Intro/Background

I was reading this article that Tenstorrent wrote on the uncertain future of AI and how it should be open to all instead of closed.
However instead of the content, I was nerdsniped and became fascinated by a particular switch they had for one of their graphics.
This is a short blogpost on my attempts to recreate it.

Recreating the look

First I tried to recreate the angled text in the skewed unpressed which was suprising easy,
as all it needed was an <p> to apply the horizontal center and a skewed div to apply the vertical centering to apply flex.

test

<div className="flex h-20 w-30 -skew-y-[23deg] items-center border-2 border-black dark:border-white">
  <p className="w-full text-center">test</p>
</div>

I then went further and created a crude rough mockup, where two divs provide the majority of the border lines of the switch,
and the containing div providing the bottom border.

test

<div className="flex pt-10">
  <div className="flex h-21 w-40 items-center border-2 border-white"></div>
  <div className="flex border-2 dark:border-white">
    <div className="flex h-20 w-30 translate-y-[-25.5px] -skew-y-[24deg] items-center border-2 border-black dark:border-white">
      <p className="w-full text-center">test</p>
    </div>
    <div className="h-20 w-15 translate-y-[-26px] skew-y-[50deg] border-2 border-black dark:border-white"></div>
  </div>
</div>

But then I got really stuck as I could not get the second rectangle to line up no matter how I calculated the angles.
Eventually I found the problem, skew respects the width and height given to the div box.
However I could not understand how these two divs had the same width.

Eventually I figured it out.
When skew is applied, the div's original bounds are still present, (Indicated by red borders).
But the skewed rendered div edges (yellow) does not utilise the original bounds, it distorts and the distorted edge does not use the original width specified to it.
Hence the distorted edge's length can be calculated to be a hypothenuse of a theoretical triangle.

test

From this discovery, you can then calculate the height of the lifted corner
and using this info can calculate the angle required for the second rectangular div to match the first div. (Some manual offsetting required)

test

<div className="flex pt-10">
  <div className="flex h-21 w-40 items-center border-2 border-white"></div>
  <div className="flex border-2 dark:border-white">
    <div className="flex h-20 w-30 translate-y-[-25.5px] -skew-y-[23deg] items-center border-2 border-white">
      <p className="w-full text-center">test</p>
    </div>
    <div className="h-20 w-15 translate-y-[-26px] skew-y-[40.32deg] border-2 border-white"></div>
  </div>
</div>

Once I had the mockup done, I can make it look a bit nicer:
So I modified the borders a bit so its a bit more consistent and less thick in some areas and then added a background to each element.

Right Switch

<div className="flex pt-10">
  <div className="flex h-21 w-40 items-center border-2 border-white"></div>
  <div className="flex border-y-2 border-r-1 border-l-2 border-white">
    <div className="flex h-20 w-30 translate-y-[-25.5px] -skew-y-[23deg] items-center border-y-2 border-r-1 border-white">
      <p className="w-full text-center">Right Switch</p>
    </div>
    <div className="h-20 w-15 translate-y-[-26px] skew-y-[40.32deg] border-x-1 border-y-2 border-white"></div>
  </div>
</div>

Note: This is using my specific background, adjust to your own site's colours

Right Switch

<div className="flex pt-10">
  <div className="flex h-21 w-40 items-center border-2 border-white"></div>
  <div className="flex border-y-2 border-r-1 border-l-2 border-white">
    <div className="flex h-20 w-30 translate-y-[-25.5px] -skew-y-[23deg] items-center border-y-2 border-r-1 border-white bg-slate-900">
      <p className="w-full text-center">Right Switch</p>
    </div>
    <div className="h-20 w-15 translate-y-[-26px] skew-y-[40.32deg] border-x-1 border-y-2 border-white"></div>
  </div>
</div>

Doing the left side is quite easy, just swap the element order and flip the skew angles from positive to negative and vice versa.

Left Switch

<div className="flex pt-10">
  <div className="flex border-y-2 border-r-1 border-l-2 border-white">
    <div className="h-20 w-15 translate-y-[-26px] -skew-y-[40.32deg] border-x-1 border-y-2 border-white bg-slate-900"></div>
    <div className="flex h-20 w-30 translate-y-[-25.5px] skew-y-[23deg] items-center border-y-2 border-r-1 border-white bg-slate-900">
      <p className="w-full text-center text-black">Left Switch</p>
    </div>
  </div>
  <div className="flex h-21 w-40 items-center border-2 border-white"></div>
</div>

Now its time to add the logic, which is quite simple, add an useState, render based on the current state and add a onClick.

Try Using me ↓

Left Switch

Right Switch

const [switchState, setSwitchState] = useState(false);
  ...
{switchState == true ? (RIGHT_SWITCH_GOES_HERE) : (LEFT_SWITCH_GOES_HERE)

onClick={() => setSwitchState(OPPOSITE_STATE)}

Conclusion

That's it, I couldn't completely replicate the button: the onhover is missing, but I didn't really think it was too necessary to replicate and it is relatively easy.
What I got stuck on and forced me to stop was the animation.
I am not experienced enough with js animation libraries to replicate the soft close/open effects and my attempts were laughably bad.
I will leave this challenge open to readers and maybe... I might return in the future to complete it once I gain the expertise.

This work is licensed under

CC BY 4.0