56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3f4g-fr876v8f.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/34g6edkub9lqm.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/16queuxy94k6z.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T6f8,

Beneath Reveal is a code component for designers who want the cursor to reveal the page instead of decorating it. One layer follows the pointer, opens a window, and shows the same page inverted and tinted, with a crisp rim. The window swells with speed, trails the hand, and breaks into droplets.

Over a link or a button it settles in one style: a pill around the target, a hairline under it, an outline, or nothing. A press splashes. Holding the press opens the window wider. On a phone, a tap splashes and dragging still scrolls. With reduced motion, a still window stays under the pointer.

Drop one instance on the page. The layer draws nothing on the canvas and nothing on the published site until someone moves the pointer, and it does not take clicks. Park it where its box will not cover the layout. A second instance on the same page stays idle.

You can set:

Window size, tint, and a quiet texture: none, grain, paper, or wash
Rim color and width
Trail, smear, flow, speed, and how long a pause keeps the window open
One lens style for links and buttons, its color, and a maximum target size
Splash, and a tap splash on touch
Over images and video, the window can keep only its rim. A layer marked data-beneath-media can show a label inside the window

Requirements and limitations:

One drawing instance per page. Two would stack two inversions.
The canvas frame is empty. Open Preview to see the window.
The trail follows a fine pointer. Touch does not drag-paint.
Reduced motion drops the trail and the droplets.
No external account, font, or asset is required.

53:[["$","$L56",null,{"post":{"id":"01a14f0f-d0ef-730e-b734-779dd0c76ae5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a1e0c773-d1ab-4dc1-86de-645157218a97","name":"BuiltByKern","slug":"builtbykern","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1e0c773-d1ab-4dc1-86de-645157218a97/vd6q2r4n","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oHLHuPsAkFa4TQ47DhZV","resolved":true,"title":"Beneath Reveal","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Beneath Reveal is a code component for designers who want the cursor to reveal the page instead of decorating it. One layer follows the pointer, opens a window, and shows the same page inverted and tinted, with a crisp rim. The window swells with speed, trails the hand, and breaks into droplets."}]},{"type":"paragraph","content":[{"type":"text","text":"Over a link or a button it settles in one style: a pill around the target, a hairline under it, an outline, or nothing. A press splashes. Holding the press opens the window wider. On a phone, a tap splashes and dragging still scrolls. With reduced motion, a still window stays under the pointer."}]},{"type":"paragraph","content":[{"type":"text","text":"Drop one instance on the page. The layer draws nothing on the canvas and nothing on the published site until someone moves the pointer, and it does not take clicks. Park it where its box will not cover the layout. A second instance on the same page stays idle."}]},{"type":"paragraph","content":[{"type":"text","text":"You can set:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Window size, tint, and a quiet texture: none, grain, paper, or wash"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rim color and width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trail, smear, flow, speed, and how long a pause keeps the window open"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One lens style for links and buttons, its color, and a maximum target size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Splash, and a tap splash on touch"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Over images and video, the window can keep only its rim. A layer marked data-beneath-media can show a label inside the window"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Requirements and limitations:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One drawing instance per page. Two would stack two inversions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The canvas frame is empty. Open Preview to see the window."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The trail follows a fine pointer. Touch does not drag-paint."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced motion drops the trail and the droplets."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external account, font, or asset is required."}]}]}]}]},"introduction":"A liquid window under your cursor","slug":"beneath-reveal","author":{"framerUserId":"a1e0c773-d1ab-4dc1-86de-645157218a97","name":"BuiltByKern","slug":"builtbykern","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1e0c773-d1ab-4dc1-86de-645157218a97/vd6q2r4n","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1e0c773-d1ab-4dc1-86de-645157218a97/01a14f0e-b475-73b9-aa28-570dc18365f6.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3052,"height":2160}}],"post":null,"createdAt":"2026-10-18T12:49:58.341Z","updatedAt":"2026-10-18T21:01:38.414Z","publishedAt":"2026-10-18T12:49:58.337Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Kern-BeneathReveal-yq7afS.js@SxWRu2jOLSSPHuPxRwNA","previewUrl":"https://beloved-accessibility-912447.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"SxWRu2jOLSSPHuPxRwNA","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":6},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-18T12:49:59.023Z","updatedAt":"2026-10-18T12:49:59.023Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you