StarKnightt

StarKnightt / liquid-effect-animation

Public

nothing just an experimental component

104
10
100% credibility
Found Feb 17, 2026 at 88 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A reusable web component that creates an interactive liquid distortion effect on text, rippling like chrome when hovered or touched.

How It Works

1
🔍 Find the Cool Effect

You stumble upon this shiny liquid ripple animation that makes text move like molten metal when you hover over it.

2
👀 See It in Action

Head to the demo page and play around by moving your mouse or finger to watch the text distort and shimmer beautifully.

3
📋 Add It to Your Page

Copy the simple animation piece into your website, just like adding a new gadget to your digital scrapbook.

4
🎨 Make It Yours

Change the words, add a little tagline, and pick colors that fit your site's vibe.

5
✨ Hover and Wow

Move your cursor over the text and feel the excitement as it ripples and flows like liquid chrome.

✅ Interactive Magic Live

Your page now captivates visitors with smooth, touchable liquid effects that make everything feel alive and modern.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 88 to 104 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is liquid-effect-animation?

This TypeScript React component delivers an interactive liquid text effect animation, turning headings into a rippling chrome-like surface on hover or touch. Drop it into shadcn/ui projects via simple copy-paste—no npm installs needed, as it pulls Three.js effects from CDN. Developers get customizable text lines, subtext, taglines, and colors for hero sections that mimic After Effects liquid animations without shader coding.

Why is it gaining traction?

Zero dependencies and shadcn conventions make it a frictionless github install nothing for Tailwind-styled apps, standing out from heavier Three.js wrappers. Props tweak backgrounds and text effortlessly, with mobile touch support and HiDPI rendering delivering smooth liquid distortion out of the box. The experimental vibe hooks devs chasing nothing experimental features like auto-ripples or image swaps for quick wow-factor prototypes.

Who should use this?

Frontend devs on shadcn/ui stacks building landing pages, portfolios, or product teasers needing liquid effect animation without WebGL boilerplate. Indie hackers prototyping Nothing Phone-style experimental UIs or agency teams adding interactive flair to client sites. Skip if you're in performance-critical apps—it's canvas-heavy.

Verdict

Fun experimental component with solid docs and examples, but 80 stars and 1.0% credibility score signal early-stage maturity—test thoroughly before production. Grab it for demos if shadcn + Three.js fits your flow; otherwise, wait for more adoption.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.