Dithered Logo

Component 22
About
An interactive canvas component that turns any image or SVG into a dithered particle field that ripples and repels around the cursor.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dithered Logo to your project and fits it to your theme.
Code

How Dithered Logo is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { DitheredLogo } from "@/components/ui/dithered-logo";

export default function DitheredLogoDemo() {
  return (
    <div className="h-[600px] w-full bg-white text-black">
      <DitheredLogo
        imageSrc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMGg1MTJ2NTEySDB6Ii8+PGcgZmlsdGVyPSJ1cmwoI2IpIiBvcGFjaXR5PSIuOCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM0Ni4xMTIgMzQyLjI2OGMxLjY3NCAxLjY3NCA0LjM2OSAxLjc3IDYuMTEyLjE2OCA1OC41MDItNTMuNzYzIDYxLjItMTQ4Ljc1MyA0LjUwNS0yMDUuNDQ4LTU2LjY5NC01Ni42OTUtMTUxLjY4NC01My45OTYtMjA1LjQ0NyA0LjUwNS0xLjYwMiAxLjc0My0xLjUwNiA0LjQzOS4xNjggNi4xMTNsMTk0LjY2MiAxOTQuNjYyWiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bXVsdGlwbHkiLz48L2c+PGcgZmlsdGVyPSJ1cmwoI2MpIiBvcGFjaXR5PSIuMyI+PHBhdGggZmlsbD0idXJsKCNkKSIgZD0iTTM0Ni4xMTIgMzQyLjI2OGMxLjY3NCAxLjY3NCA0LjM2OSAxLjc3IDYuMTEyLjE2OCA1OC41MDItNTMuNzYzIDYxLjItMTQ4Ljc1MyA0LjUwNS0yMDUuNDQ4LTU2LjY5NC01Ni42OTUtMTUxLjY4NC01My45OTYtMjA1LjQ0NyA0LjUwNS0xLjYwMiAxLjc0My0xLjUwNiA0LjQzOS4xNjggNi4xMTNsMTk0LjY2MiAxOTQuNjYyWiIvPjwvZz48ZyBmaWx0ZXI9InVybCgjZSkiIG9wYWNpdHk9Ii4zIj48cGF0aCBmaWxsPSJ1cmwoI2YpIiBkPSJNMjYxLjYwNyAzMjQuNzkyYzIuNDQxLTEuNDM0IDIuODQ0LTQuNzg2LjkxMi02Ljg1NUwxMjYuMTIxIDE3MS45NWMtMi4wMTgtMi4xNi01LjUzNS0xLjgzMS03LjAxNy43MjdhMTQ4Ljk5NiAxNDguOTk2IDAgMCAwLTYuNDkgMTIuNTM3Yy0uNzc0IDEuNjg4LS4zODkgMy42NzMuOTI2IDQuOTg0bDEzNy4wODggMTM2LjU5OGE0LjUxMyA0LjUxMyAwIDAgMCA0Ljk4NS45NDRjMi43MDItMS4xNzYgNC4wMjEtMS43OSA1Ljk5NC0yLjk0OFoiLz48L2c+PHBhdGggZmlsbD0idXJsKCNnKSIgZD0iTTM1Ny4zNTggMzc0LjMwNmMxLjc1OCAxLjc1OCA0LjU4MSAxLjg2NiA2LjQxNi4xODlhMTYzLjU5NSAxNjMuNTk1IDAgMCAwIDUuMzE2LTUuMDgxYzYyLjU0Ny02Mi41NDcgNjIuNTQ3LTE2My45NTYgMC0yMjYuNTA0LTYyLjU0OC02Mi41NDctMTYzLjk1Ny02Mi41NDctMjI2LjUwNCAwYTE2My41OTUgMTYzLjU5NSAwIDAgMC01LjA4MSA1LjMxNmMtMS42NzcgMS44MzUtMS41NjkgNC42NTguMTg5IDYuNDE2bDIxOS42NjQgMjE5LjY2NFoiLz48cGF0aCBmaWxsPSJ1cmwoI2gpIiBkPSJNMzU3LjM1OCAzNzQuMzA2YzEuNzU4IDEuNzU4IDQuNTgxIDEuODY2IDYuNDE2LjE4OWExNjMuNTk1IDE2My41OTUgMCAwIDAgNS4zMTYtNS4wODFjNjIuNTQ3LTYyLjU0NyA2Mi41NDctMTYzLjk1NiAwLTIyNi41MDQtNjIuNTQ4LTYyLjU0Ny0xNjMuOTU3LTYyLjU0Ny0yMjYuNTA0IDBhMTYzLjU5NSAxNjMuNTk1IDAgMCAwLTUuMDgxIDUuMzE2Yy0xLjY3NyAxLjgzNS0xLjU2OSA0LjY1OC4xODkgNi40MTZsMjE5LjY2NCAyMTkuNjY0WiIvPjxwYXRoIGZpbGw9InVybCgjaSkiIGQ9Ik0zMzYuMzMzIDM5NC42NzJjMi42MjctMS41MjggMy4wMjQtNS4xMTguODc1LTcuMjY3TDEyNC41OTUgMTc0Ljc5MmMtMi4xNDktMi4xNDktNS43MzktMS43NTItNy4yNjcuODc1YTE1OC44NyAxNTguODcgMCAwIDAtNy4xMTkgMTMuNzI1Yy0uODExIDEuNzcxLS40MSAzLjg1Mi45NjggNS4yMjlsMjA2LjIwMSAyMDYuMjAyYzEuMzc4IDEuMzc4IDMuNDU5IDEuNzc5IDUuMjMuOTY4YTE1OC44NyAxNTguODcgMCAwIDAgMTMuNzI1LTcuMTE5WiIvPjxwYXRoIGZpbGw9InVybCgjaikiIGQ9Ik0zMzYuMzMzIDM5NC42NzJjMi42MjctMS41MjggMy4wMjQtNS4xMTguODc1LTcuMjY3TDEyNC41OTUgMTc0Ljc5MmMtMi4xNDktMi4xNDktNS43MzktMS43NTItNy4yNjcuODc1YTE1OC44NyAxNTguODcgMCAwIDAtNy4xMTkgMTMuNzI1Yy0uODExIDEuNzcxLS40MSAzLjg1Mi45NjggNS4yMjlsMjA2LjIwMSAyMDYuMjAyYzEuMzc4IDEuMzc4IDMuNDU5IDEuNzc5IDUuMjMuOTY4YTE1OC44NyAxNTguODcgMCAwIDAgMTMuNzI1LTcuMTE5WiIvPjxwYXRoIGZpbGw9InVybCgjaykiIGQ9Ik0yODYuNjU5IDQxMy4zNDhjMy42MTktLjcwNyA0Ljg2LTUuMTM2IDIuMjUzLTcuNzQzTDEwNi4zOTUgMjIzLjA4OGMtMi42MDctMi42MDctNy4wMzYtMS4zNjYtNy43NDMgMi4yNTNhMTYwLjgxMyAxNjAuODEzIDAgMCAwLTIuNTAyIDE4LjQ2MiA0LjY2NiA0LjY2NiAwIDAgMCAxLjM2NiAzLjY1NGwxNjcuMDI3IDE2Ny4wMjdhNC42NjcgNC42NjcgMCAwIDAgMy42NTQgMS4zNjYgMTYwLjgzNCAxNjAuODM0IDAgMCAwIDE4LjQ2Mi0yLjUwMloiLz48cGF0aCBmaWxsPSJ1cmwoI2wpIiBkPSJNMjg2LjY1OSA0MTMuMzQ4YzMuNjE5LS43MDcgNC44Ni01LjEzNiAyLjI1My03Ljc0M0wxMDYuMzk1IDIyMy4wODhjLTIuNjA3LTIuNjA3LTcuMDM2LTEuMzY2LTcuNzQzIDIuMjUzYTE2MC44MTMgMTYwLjgxMyAwIDAgMC0yLjUwMiAxOC40NjIgNC42NjYgNC42NjYgMCAwIDAgMS4zNjYgMy42NTRsMTY3LjAyNyAxNjcuMDI3YTQuNjY3IDQuNjY3IDAgMCAwIDMuNjU0IDEuMzY2IDE2MC44MzQgMTYwLjgzNCAwIDAgMCAxOC40NjItMi41MDJaIi8+PHBhdGggZmlsbD0idXJsKCNtKSIgZD0iTTIxNy4wMzEgNDExLjU3N2M0LjQ1IDEuMTA3IDcuMjAxLTQuMTU1IDMuOTU5LTcuMzk4TDEwNy44MjEgMjkxLjAxYy0zLjI0My0zLjI0Mi04LjUwNC0uNDkxLTcuMzk4IDMuOTU5IDYuNzg0IDI3LjI3OSAyMC44MzggNTMuMTIxIDQyLjE2MyA3NC40NDUgMjEuMzI0IDIxLjMyNCA0Ny4xNjYgMzUuMzc5IDc0LjQ0NSA0Mi4xNjNaIi8+PHBhdGggZmlsbD0idXJsKCNuKSIgZD0iTTIxNy4wMzEgNDExLjU3N2M0LjQ1IDEuMTA3IDcuMjAxLTQuMTU1IDMuOTU5LTcuMzk4TDEwNy44MjEgMjkxLjAxYy0zLjI0My0zLjI0Mi04LjUwNC0uNDkxLTcuMzk4IDMuOTU5IDYuNzg0IDI3LjI3OSAyMC44MzggNTMuMTIxIDQyLjE2MyA3NC40NDUgMjEuMzI0IDIxLjMyNCA0Ny4xNjYgMzUuMzc5IDc0LjQ0NSA0Mi4xNjNaIi8+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utb3BhY2l0eT0iLjUiIHN0cm9rZS13aWR0aD0iNSIgZD0iTTM2Mi4wODggMzcyLjY0OWMtLjgxNi43NDYtMi4xMTkuNzMzLTIuOTYzLS4xMTFMMTM5LjQ2MiAxNTIuODc1Yy0uODQ0LS44NDQtLjg1Ny0yLjE0Ny0uMTExLTIuOTYzYTE2MC42NjEgMTYwLjY2MSAwIDAgMSA1LjAwMy01LjIzNGM2MS41NzEtNjEuNTcgMTYxLjM5Ny02MS41NyAyMjIuOTY4IDAgNjEuNTcxIDYxLjU3MSA2MS41NzEgMTYxLjM5NyAwIDIyMi45NjhhMTYwLjY2MSAxNjAuNjYxIDAgMCAxLTUuMjM0IDUuMDAzWm0tMjYuNjQ4IDE2LjUyM2MxLjAzOCAxLjAzOC43ODYgMi42Ny0uMzY0IDMuMzRhMTU2LjU2MiAxNTYuNTYyIDAgMCAxLTEzLjUxIDcuMDA2Yy0uNzk0LjM2NC0xLjc2MS4xOTctMi40Mi0uNDYyTDExMi45NDQgMTkyLjg1NGMtLjY1OS0uNjU5LS44MjYtMS42MjYtLjQ2Mi0yLjQyYTE1Ni41NjIgMTU2LjU2MiAwIDAgMSA3LjAwNi0xMy41MWMuNjctMS4xNSAyLjMwMi0xLjQwMiAzLjM0LS4zNjRMMzM1LjQ0IDM4OS4xNzJabS00OC4yOTYgMTguMjAxYzEuMjc2IDEuMjc2LjU3NCAzLjIyMS0uOTY0IDMuNTIxYTE1OC4yNjkgMTU4LjI2OSAwIDAgMS0xOC4xNzUgMi40NjMgMi4xNjcgMi4xNjcgMCAwIDEtMS42OTQtLjY0TDk5LjI4MyAyNDUuNjg5YTIuMTY3IDIuMTY3IDAgMCAxLS42NC0xLjY5NCAxNTguMzEzIDE1OC4zMTMgMCAwIDEgMi40NjMtMTguMTc1Yy4zLTEuNTM4IDIuMjQ1LTIuMjQgMy41MjEtLjk2NGwxODIuNTE3IDE4Mi41MTdabS02Ny45MjItMS40MjZjLjgxLjgxLjgxMiAxLjczNS40NjQgMi4zOTEtLjMzMy42My0xLjAwNyAxLjA3Mi0yLjA1Mi44MTMtMjYuODUtNi42NzgtNTIuMjg2LTIwLjUxLTczLjI4LTQxLjUwNS0yMC45OTUtMjAuOTk0LTM0LjgyNy00Ni40My00MS41MDUtNzMuMjgtLjI1OS0xLjA0NS4xODMtMS43MTkuODEzLTIuMDUyLjY1Ni0uMzQ4IDEuNTgxLS4zNDYgMi4zOTEuNDY0bDExMy4xNjkgMTEzLjE2OVoiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzb2Z0LWxpZ2h0Ii8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMjU2IiB4Mj0iMjU2IiB5MT0iMCIgeTI9IjUxMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiMyRDJFMzEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwRjEwMTIiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZCIgeDE9IjI1Ni4zMDYiIHgyPSIyNTYuMzA2IiB5MT0iOTUuMzMyIiB5Mj0iMzc5LjQ5MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNDNUM1QzUiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZiIgeDE9IjE3OC4zNjUiIHgyPSIxNzguMzY1IiB5MT0iMTY3LjI0OCIgeTI9IjM1MS4xMjYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQzVDNUM1Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIyNTYiIHgyPSIyNTYiIHkxPSI5NiIgeTI9IjQxNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNDQ0MiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iaSIgeDE9IjI1NiIgeDI9IjI1NiIgeTE9Ijk2IiB5Mj0iNDE2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0NDQyIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJrIiB4MT0iMjU2IiB4Mj0iMjU2IiB5MT0iOTYiIHkyPSI0MTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQ0NDIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9Im0iIHgxPSIyNTYiIHgyPSIyNTYiIHkxPSI5NiIgeTI9IjQxNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNDQ0MiLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iaCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAgMzIwIC0zMjAgMCAyNTYgOTYpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iLjU5OCIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImoiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwIDMyMCAtMzIwIDAgMjU2IDk2KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiLz48c3RvcCBvZmZzZXQ9Ii41OTgiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJsIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMCAzMjAgLTMyMCAwIDI1NiA5NikiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIuNTk4IiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0ibiIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAgMzIwIC0zMjAgMCAyNTYgOTYpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iLjU5OCIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PC9yYWRpYWxHcmFkaWVudD48ZmlsdGVyIGlkPSJiIiB3aWR0aD0iMjk1LjU4MyIgaGVpZ2h0PSIyOTUuNTgyIiB4PSIxMjYuMTM1IiB5PSI2Ni44OCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImhhcmRBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPjxmZU9mZnNldCBkeT0iLTUuMTIiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIvPjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC40IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgbW9kZT0icGx1cy1saWdodGVyIiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18xNDEzNF80NjU0Ii8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzE0MTM0XzQ2NTQiIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJjIiB3aWR0aD0iMjY3LjU4MyIgaGVpZ2h0PSIyNjcuNTgyIiB4PSIxNDAuMTM1IiB5PSI4NiIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlR2F1c3NpYW5CbHVyIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xNDEzNF80NjU0IiBzdGREZXZpYXRpb249IjUiLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJlIiB3aWR0aD0iMTcxLjUyMiIgaGVpZ2h0PSIxNzcuNTkyIiB4PSIxMDIuMjE4IiB5PSIxNjAuNTIyIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzE0MTM0XzQ2NTQiIHN0ZERldmlhdGlvbj0iNSIvPjwvZmlsdGVyPjwvZGVmcz48L3N2Zz4="
        className="h-full w-full"
        gridSize={200}
        scale={0.36}
        dotScale={1}
        invert={true}
        cornerRadius={0.2}
        gamma={1.0}
        blur={3.75}
        diffusionStrength={1.0}
      />
    </div>
  );
}