# My first Framer AI component for the Basedash site

Tom Johnson · 2025-05-22

[Basedash](https://x.com/tomjohndesign/status/1925589753597919558)

This is the first thing I made with Framer's new AI update, for the [Basedash](https://www.tomjohn.design/content/basedash) site. It's a heading that glitches through characters at random, and on hover [(0:34)](#t=34). I'd tried to make it with Claude, GPT and Google and never got it to work. This took about 20 minutes, maybe half an hour [(1:24)](#t=84).

![A heading glitching through characters on the Basedash site, captioned as I say: “And what I have here is I have it so that it's randomly glitching through characters and also doing it on hover, which is crazy.”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/framer-ai-first-component/glitching-TozHFbFA8YliHkF5iEHhM1uIzHJ6bi.mp4 "Clip")

Every word and every character is its own span, cycling through on its own, and all of that is hidden from screen readers, with a version of the heading that stays readable and indexable [(1:01)](#t=61). It stops when you scroll it out of view.

![The glitching heading, made in about 20 minutes, captioned as I say: “crazy. I did this in, it took about 20 minutes, maybe half an hour, but look at this. Oh man, this is so cool. There's also”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/framer-ai-first-component/twenty-minutes-TJAm3rytSsBvL2B96McE2CdnR1qCd0.mp4 "Clip")

In Framer it has properties for the text, the heading level, the font, the color and a glitch speed, which varies each character between 60% and 140% of it so they don't all switch at once [(2:14)](#t=134). A width transition keeps the characters from flickering as they change, and there's a resting and an active opacity. The glitching itself comes from the font's stylistic sets [(3:38)](#t=218).

![The component's properties in Framer, including glitch speed, captioned as I say: “this is a glitch speed. That's making it, so it's going between 60 and 140% of that glitch speed. So that not everything switches at the same pace.”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/framer-ai-first-component/glitch-speed-KdAwnWrNYhwJsXzDRnjcq8FKZF82At.mp4 "Clip")

I think the Framer team really cooked with this one [(3:14)](#t=194). It's fast, it's minimal, and it has exactly the right context instead of trying to rebuild the whole page, which is what I came back to a few months later in [The Vibe Zone](https://www.tomjohn.design/content/the-vibe-zone). The video already had my captions on it, so the clips here keep those. A couple of weeks later I used it to [add logo downloads](https://www.tomjohn.design/content/framer-ai-logo-download).

When I posted it on X I wrote:

> Quick behind the scenes on the first new Framer component I’ve made with the new AI features for the Basedash site. I’ve tried making this exact component about 10 times with all of the AI tools, never worked once. This took 20 minutes, and I love it. We are gonna make some craaaazy stuff with this. Well done Framer team.