5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8e1,

About this component

Hover Text Reveal is a text animation component designed to progressively reveal text on hover. It adds a layer of interaction to typography through a smooth, controlled animation, without affecting readability or breaking layout structure.

Features

Character Speed: adjust how quickly the reveal animation progresses
Animation Duration: set the overall timing of the reveal effect
Full Font Control: customize font family, size, weight, and color directly within Framer
Hover Text Color: define a specific text color for the hover state
Character Set: select which characters are used during the reveal animation, including letters, symbols, and numbers
Full Text Control: smoothly transition from one text to another, with complete freedom over content, including letters, numbers, and symbols

How it works

Hover Text Reveal animates text on hover to transition from an initial state to a fully revealed text of your choice. The component works seamlessly with Framer’s text system and supports responsive layouts, making it suitable for both small texts and larger typographic elements.

For optimal visual consistency and clarity, monospaced fonts are recommended: uniform character widths help maintain a smoother and more balanced reveal animation.

Best for

Interactive hero sections
Navigation links and menus
Creative landing pages
Subtle and playful hover micro-interactions

Support

For any queries and support, contact kopai.designstudio@gmail.com

Refund Policy

A full refund will be provided if the component does not work as described and we are unable to resolve the issue. Refunds are not available for any other reasons such as accidental purchases, change of mind, expectations of features that were not clearly listed or lack of use.

5a:[["$","$L5d",null,{"post":{"id":"019bb84a-0f2b-7efb-9bf9-7193fcae50e2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b12f0aac-9ce7-4918-ba83-c7a38e7faff4","name":"Kopai Studio","slug":"kopai-studio","avatar":"https://framerusercontent.com/avatars/users/b12f0aac-9ce7-4918-ba83-c7a38e7faff4/rmhx41i_D","followed":false,"followsYou":false},"media":[],"resources":[{"id":"e7O2zQXrgQbc0V3aXG8w","resolved":true,"title":"Hover Text Reveal","body":"$5e","bodyJson":null,"introduction":"Smooth animation for your typography.","slug":"hover-text-reveal","author":{"framerUserId":"b12f0aac-9ce7-4918-ba83-c7a38e7faff4","name":"Kopai Studio","slug":"kopai-studio","avatar":"https://framerusercontent.com/avatars/users/b12f0aac-9ce7-4918-ba83-c7a38e7faff4/rmhx41i_D","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/e7O2zQXrgQbc0V3aXG8w/hover-text-reveal-lWeRP6Fp9XFRKRksCFqDzlt6GCbUmi","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-29T16:47:22.817Z","updatedAt":"2026-02-14T08:05:45.357Z","publishedAt":"2026-01-13T16:56:59.947Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/HoverTextReveal-2mRt.js@jqcanlEjxhqqGgkmN9hP","previewUrl":"https://welcomed-professionals-359250.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"jqcanlEjxhqqGgkmN9hP","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-13T16:56:59.947Z","updatedAt":"2026-01-13T16:56:59.947Z","reported":false}}],"$L5f"]

Suggested for you