# Caligrama A 3D shape spinning on screen, drawn live with terminal letters and symbols instead of pixels. > Caligrama is an exclusive THM Componentes component that draws a lit 3D scene live with ASCII characters: each cell of the screen picks a symbol based on the light in the scene. The shape spins on its own and follows the cursor. Built with Three.js and a custom shader, it fits tech, cybersecurity and terminal-style portfolio heroes. - Category: 3D and space - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, WebGL, Three.js - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/caligrama/ ## What it looks like It looks like an old terminal screen displaying a 3D object. By default a torus knot, a sort of braided donut, spins slowly in the center, lit by a key light and a bluish rim light. Instead of colors and pixels, the area is split into a grid of 10-pixel cells, and each one shows a character from a scale that runs from a blank space to the at sign, depending on the light at that spot. Symbols are navy on a near-white background, or take on the scene color in colored mode. The object leans smoothly toward the mouse. ## You may be looking for this if you asked for something like - “a 3D object made of little letters spinning at the top of my site” - “a hacker terminal effect with a 3D shape in the middle” - “an ASCII code look for a cybersecurity site” - “a 3D animation that looks like an old computer” - “a spinning shape drawn with text symbols that follows the mouse” - “a tech company hero with a command line aesthetic” - “that 3D ASCII art effect you see on developer portfolios” ## Also known as 3D ASCII art, ASCII shader, terminal effect, text mode 3D, character rendering, ASCII art animation ## When to use - A hero for a tech, security or infrastructure company - A developer portfolio with a terminal aesthetic - A launch page for a command line tool or an API - The opening of a coding event or hackathon ## When to avoid - Pages that already run another WebGL effect, since the prompt allows one heavy effect per page - Warm, caring brands such as health and wellness, where a terminal look clashes ## How to ask your AI ```text Create a 3D scene rendered live in ASCII characters with Three.js for the hero: a lit shape that spins on its own and follows the cursor, with glyphs in my brand colors, a pause when off screen, a fixed angle for reduced motion and client-only loading with a static fallback in Nuxt. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Caligrama ### Will Caligrama make my site heavy? It is rated Heavy in THM Componentes: Caligrama draws the 3D scene with Three.js and then turns it into characters in a second GPU pass, every frame. It pauses when off screen and caps resolution at 2x, and the prompt tells your AI to load it on demand and keep a single heavy WebGL effect per page. ### How do I use Caligrama in Nuxt with SSR? Caligrama depends on the three package and creates its WebGL context in the browser. The THM Componentes prompt tells your AI to wrap the component in ClientOnly with a static fallback, an image or a color, and to load it on demand, so the server delivers the page without waiting for the 3D scene. ### Can I change the shape and characters in Caligrama? Yes. Caligrama offers three shapes, torus knot, icosahedron and torus, and the character ramp is a text prop, from darkest to lightest. You can also adjust cell size, colors and speed. With reduced motion turned on, the automatic rotation stops and the shape only moves with the cursor. ## Related components - [Ponto-cruz](https://vibecode.thmtecnologia.com/en/components/ponto-cruz/): The real page content is redrawn live as ASCII art, with characters that mimic light and shadow. - [Fliperama](https://vibecode.thmtecnologia.com/en/components/fliperama/): Turns a photo into a pattern of dots in a few colors, like an old video game or a retro print. - [Cifra](https://vibecode.thmtecnologia.com/en/components/cifra/): A headline that starts as scrambled letters, numbers and symbols and settles letter by letter into the phrase. - [Caldeira](https://vibecode.thmtecnologia.com/en/components/caldeira/): A dark terminal window where people type commands, see colored output and watch a demo deploy fill its progress bars. - [Quimera](https://vibecode.thmtecnologia.com/en/components/quimera/): A glossy liquid 3D shape that ripples, merges with a ring and two capsules and turns with your mouse. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).