---
title: "Inkwell — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Duties Design Studio · Text. How it works Drop Inkwell onto your page, type your text, pick your colors, and scroll."
canonical: "https://framer.elliotli.dev/component/inkwell"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Inkwell

# Inkwell

Text that fills with color on scroll

[View on Framer](https://framer.com/marketplace/components/inkwell/?via=elliot-li)

![Inkwell preview image 1](https://framer.elliotli.dev/og/component/inkwell/96963b8e8b8eb5f1/1600x1200.jpg)

## Summary

How it works Drop Inkwell onto your page, type your text, pick your colors, and scroll.

## Description

**How it works**

Drop Inkwell onto your page, type your text, pick your colors, and scroll. Words fill one by one as users move down the page. Simple.

**Three effects**

\- Fade: smooth color transition, word by word

\- Blur: words start soft and sharpen as they fill

\- Snap: instant color switch for a punchy feel

**Full typography control**

Uses Framer's native extended font picker. Set font family, weight, size, line height, letter spacing, and alignment directly from the properties panel. Works with Framer's responsive breakpoints.

**Additional controls**

\- Trigger timing: start the fill early, normal, or late in the viewport

\- Play once: lock the fill after scrolling past, or let it replay on scroll up

\- Semantic HTML: H1 through H6, P, or Span for accessibility and SEO

\- Line breaks: press Enter in the text field for paragraph spacing

**Support**

Email [new@duties.xyz](mailto:new@duties.xyz)

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

-   All · #9538

## Details

- **Author**: Duties Design Studio
- **Price**: $10.00
- **Published**: 2026-05-07
- **Updated**: 2026-05-07
- **Added**: 2026-05-04
- **Categories**: Text

## More like this

-   [Gradient Wave Text](/component/gradient-wave-text) — Syauqizaidan Khairan Khalaf · $5 — Bands of color sweep through text
-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Count Up In View](/component/count-up-in-view) — H SHIFT WORKS · Free — Numbers that count up in view
-   [BentoExpandGrid](/component/bentoexpandgrid) — Dulaj Design · $15 — About BentoExpandGrid brings a sophisticated, interactive layout system to your Framer projects.