by Good Fella
LibraryKitsNewLearnDocsPricing
Get Annnimate

The library

Curated, not a catalog dump.

Every signature component, built for a real site. Filter, preview live, copy in React or Vue.

Browse the library
By categoryButtonsScrollUI ComponentsExperimentalShadersMenusSections
CollectionsAll componentsMost popular

Landmark Kits

Depth, not breadth.

A deep, stand-alone collection built around one system. The first Kit is Reveal - preloaders and hero sections, one mixable system, WebGL and GSAP. React, Vue, HTML / CSS / JS. Not for Webflow.

See the Reveal Kit
LearnWhat a Kit isKit vs. the Library
Stay closeFounding offerRoadmapPricing
The Reveal Kit

Out now

The Reveal Kit

Concepts, patterns, tools

Learn the vocabulary.

Definitions and examples for the GSAP and animation concepts behind production motion. Free, citable, and cross-linked with the components that use each idea.

Open concepts
ConceptsEasingScrollTimelineTextReactPerformancePlugins
ExplorePatternsFree toolsDocumentationComparisons
The Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is liveThe Reveal Kit is liveAnnnimate MCP server is live
ButtonsScrollUI ComponentsExperimentalShadersMenusSectionsAll componentsMost popular
What a Kit isKit vs. the LibraryFounding offerRoadmapPricing
EasingScrollTimelineTextReactPerformancePluginsPatternsFree toolsDocumentationComparisons
DocsPricing
Get Annnimate
Library shipping weekly
Weekly dropJoin over 1,000+ developers and designers
Contact
  • How it works
  • Documentation
  • MCP server
  • Learn GSAP
  • Compare
  • State of Web Animation
  • Changelog
  • Roadmap
  • Pricing
  • FAQs
  • All components
  • Buttons
  • Scroll
  • UI Components
  • Experimental
  • Shaders
  • Menus
  • Sections
  • Showcase
  • See the Kits
  • What a Kit is
  • Kit vs. the Library
  • Founding offer

Platform

  • How it works
  • Documentation
  • MCP server
  • Learn GSAP
  • Compare
  • State of Web Animation
  • Changelog
  • Roadmap
  • Pricing
  • FAQs

Library

  • All components
  • Buttons
  • Scroll
  • UI Components
  • Experimental
  • Shaders
  • Menus
  • Sections
  • Showcase

Kits

  • See the Kits
  • What a Kit is
  • Kit vs. the Library
  • Founding offer
© 2026 Annnimate·Built byGood Fella
PrivacyTermsCookiesRefund
Loading
  1. Animations
  2. Dithering
  3. Vue

Annnimate

Every component, in every framework.

Dithering is one of 50+ GSAP components, each shipping in React, Vue, and HTML/CSS/JS with the same production tuning.

Open DitheringBrowse the library
GSAP component for Vue

Dithering in Vue.

A 2-color dithering shader for images and video. Point it at any img or video and it renders as an animated Bayer-dithered halftone (2x2, 4x4, 8x8, or random threshold), with a cursor reveal lens that recolours the dots with the real source under the mouse and a faint ambient shimmer in the dark areas. A 1-bit retro/print treatment for hero images, video backdrops, and editorial media.

Framework guides

Install

Install Dithering in your Vue project

Dithering ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.

BASH
Integrate

Where it goes in your Vue app

Dithering is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.

In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.

The component uses the <script setup> composition API and TypeScript-friendly defineProps.

Gotchas

Vue-specific gotchas

GSAP cleanup in onUnmounted, not onBeforeUnmount

Use onUnmounted to kill tweens and ScrollTriggers. onBeforeUnmount fires while the DOM is still mounted, but onUnmounted is the more idiomatic place for animation cleanup in Vue 3.

Template refs are .value, not .current

const el = ref(null); access as el.value (not el.current like React). Pass el.value into gsap.to / gsap.from targets.

Register plugins once, outside setup

Plugin registration (gsap.registerPlugin(ScrollTrigger, ...)) can run at module top level in Vue 3 + Vite because the build is client-first. In Nuxt with SSR, wrap in if (process.client) or place inside onMounted.
FAQ

Common questions

Does Dithering work in Nuxt 3?
Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in .
Does Dithering work with Vue 2?
No - the component uses the Vue 3 Composition API and Dithering for Vue - GSAP component | Annnimate