---
title: "3D Text Pop Effect — Free Framer component · Best of Framer"
description: "Free Framer component · by Nowwwl · Text. Customizable Text Offset on Hover"
canonical: "https://framer.elliotli.dev/component/3d-text-pop-effect"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/3D Text Pop Effect

# 3D Text Pop Effect

Customizable Text Offset on Hover

[View on Framer](https://framer.com/marketplace/components/3d-text-pop-effect/?via=elliot-li)

![3D Text Pop Effect preview image 1](https://framer.elliotli.dev/og/component/3d-text-pop-effect/68ebc54eb132ca7d/1600x1200.jpg)

## Summary

Customizable Text Offset on Hover

## Description

Bring a bold, **neo-brutalist edge** to your typography with an unapologetically tactile text component built to feel raw, physical, and interactive. Each character is stacked, offset, and outlined to create hard contrast and visual weight, then springs to life on hover with decisive, per-letter motion.

## Features:

-   Neo-brutalist typography: high contrast, hard edges, and deliberate offsets for a raw, graphic look.
    
-   Per-letter interaction: each character responds independently on hover.
    
-   Layered depth system: fixed shadow layer + animated foreground for punchy separation.
    
-   Customizable outline: adjustable outline thickness and color using a shadow-based stroke that preserves sharp corners.
    
-   Fully adjustable offsets: fine-tune base shadow position and hover movement for aggressive or subtle effects.
    
-   Crisp motion tuning: precise easing and duration for a satisfying, mechanical pop.
    

Perfect for **neo-brutalist websites, bold brands, editorial headlines, and landing pages** where typography isn’t decorative, it’s the interface.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6106

## Details

- **Author**: Nowwwl
- **Published**: 2026-01-26
- **Updated**: 2026-01-26
- **Added**: 2025-12-07
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing