{"id":26919365,"url":"https://github.com/ddoemonn/react-waves","last_synced_at":"2026-04-12T21:53:56.821Z","repository":{"id":252158881,"uuid":"839601108","full_name":"ddoemonn/react-waves","owner":"ddoemonn","description":"🌊 Animated wave component with React ","archived":false,"fork":false,"pushed_at":"2024-08-08T00:47:39.000Z","size":74,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-08T03:06:45.681Z","etag":null,"topics":["animation","canvas","react","tailwindcss","ui","wave","waves"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ddoemonn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-08T00:28:11.000Z","updated_at":"2024-08-08T03:06:50.686Z","dependencies_parsed_at":"2024-08-08T03:18:56.073Z","dependency_job_id":null,"html_url":"https://github.com/ddoemonn/react-waves","commit_stats":null,"previous_names":["ddoemonn/react-waves"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddoemonn%2Freact-waves","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddoemonn%2Freact-waves/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddoemonn%2Freact-waves/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddoemonn%2Freact-waves/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ddoemonn","download_url":"https://codeload.github.com/ddoemonn/react-waves/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713659,"owners_count":20821930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas","react","tailwindcss","ui","wave","waves"],"created_at":"2025-04-01T21:32:50.717Z","updated_at":"2026-04-12T21:53:56.764Z","avatar_url":"https://github.com/ddoemonn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-waves\n\nThe Waves component is a customizable, animated wave generator built with React. It allows you to create beautiful, overlapping wave animations with ease, perfect for adding dynamic backgrounds or decorative elements to your web applications.\n\nhttps://github.com/user-attachments/assets/7f5f3f6e-70c4-4949-88d1-ea0ee9cdf05e\n\n\n## Features\n\n- Create multiple overlapping waves\n- Customize colors, speeds, amplitudes, and heights for each wave\n- Responsive design\n- Smooth animations using HTML5 Canvas\n- TypeScript support\n\n## Component Code\n\nHere's the full implementation of the Waves component:\n\n```typescript\n'use client';\n\nimport React, { useEffect, useRef } from 'react';\n\ninterface Wave {\n  color: string;\n  speed?: number;\n  amplitude?: number;\n  height: number;\n}\n\ninterface WavesProps {\n  height: number;\n  width: number;\n  waves: Wave[];\n  baseSpeed?: number;\n  baseAmplitude?: number;\n}\n\nconst Waves: React.FC\u003cWavesProps\u003e = ({\n  height,\n  width,\n  waves,\n  baseSpeed = 0.5,\n  baseAmplitude = 20,\n}) =\u003e {\n  const canvasRef = useRef\u003cHTMLCanvasElement | null\u003e(null);\n\n  useEffect(() =\u003e {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    let animationFrameId: number;\n    let startTime: number | null = null;\n\n    const setCanvasSize = () =\u003e {\n      if (canvas) {\n        canvas.width = width;\n        canvas.height = height;\n      }\n    };\n\n    const drawWaves = (timestamp: number) =\u003e {\n      if (!startTime) startTime = timestamp;\n      const elapsed = timestamp - startTime;\n\n      ctx.clearRect(0, 0, width, height);\n      ctx.fillStyle = 'white';\n      ctx.fillRect(0, 0, width, height);\n\n      waves.forEach((wave, index) =\u003e {\n        ctx.beginPath();\n        ctx.moveTo(0, height);\n\n        const waveSpeed = wave.speed || baseSpeed;\n        const waveAmplitude = wave.amplitude || baseAmplitude;\n        const waveHeight = wave.height;\n\n        for (let x = 0; x \u003c width; x++) {\n          const frequency = 0.01 + index * 0.005;\n          const y = Math.sin(x * frequency + elapsed * waveSpeed * 0.002 + (index * Math.PI * 2) / waves.length) * waveAmplitude;\n          ctx.lineTo(x, waveHeight + y);\n        }\n\n        ctx.lineTo(width, height);\n        ctx.lineTo(0, height);\n        ctx.fillStyle = wave.color;\n        ctx.globalAlpha = 0.5; // Set transparency\n        ctx.fill();\n        ctx.globalAlpha = 1; // Reset transparency\n      });\n\n      animationFrameId = requestAnimationFrame(drawWaves);\n    };\n\n    setCanvasSize();\n    animationFrameId = requestAnimationFrame(drawWaves);\n\n    return () =\u003e {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [height, width, waves, baseSpeed, baseAmplitude]);\n\n  return (\n    \u003cdiv\n      style={{ height }}\n      className=\"rounded-xl overflow-hidden\"\n    \u003e\n      \u003ccanvas\n        ref={canvasRef}\n        width={width}\n        height={height}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Waves;\n```\n\nNote the `'use client';` directive at the top of the file. This is necessary when using this component in a Next.js 13+ project with the App Router, as it marks this component as a Client Component.\n\n## Usage\n\nHere's a basic example of how to use the Waves component:\n\n```jsx\nimport React from 'react';\nimport  Waves  from '@/components/Waves';\n\nconst WavesExample = () =\u003e {\n  const waves = [\n    { color: '#3B82F6', height: 100, speed: 0.3 },\n    { color: '#60A5FA', height: 150, amplitude: 15 },\n    { color: '#93C5FD', height: 200, speed: 0.6 },\n    { color: '#BFDBFE', height: 250, amplitude: 10 },\n  ];\n\n  return (\n    \u003cWaves\n      height={400}\n      width={600}\n      waves={waves}\n      baseSpeed={0.5}\n      baseAmplitude={20}\n    /\u003e\n  );\n};\n\nexport default WavesExample;\n```\n\n### Props\n\nThe `Waves` component accepts the following props:\n\n- `height` (number): The height of the canvas in pixels.\n- `width` (number): The width of the canvas in pixels.\n- `waves` (array): An array of wave objects, each with the following properties:\n  - `color` (string): The color of the wave (e.g., '#3B82F6').\n  - `height` (number): The vertical position of the wave.\n  - `speed` (number, optional): The speed of the wave animation.\n  - `amplitude` (number, optional): The amplitude of the wave.\n- `baseSpeed` (number, optional): The default speed for waves without a specified speed.\n- `baseAmplitude` (number, optional): The default amplitude for waves without a specified amplitude.\n\n### Advanced Usage\n\nYou can create more complex wave compositions by using multiple `Waves` components:\n\n```jsx\nimport React from 'react';\nimport Waves from '@components/Waves';\n\nconst AdvancedWavesExample = () =\u003e {\n  const wavesSets = [\n    [\n      { color: '#3B82F6', height: 100, speed: 0.3 },\n      { color: '#60A5FA', height: 150, amplitude: 15 },\n      { color: '#93C5FD', height: 200, speed: 0.6 },\n      { color: '#BFDBFE', height: 250, amplitude: 10 },\n    ],\n    [\n      { color: '#10B981', height: 80, amplitude: 25 },\n      { color: '#34D399', height: 120, speed: 0.8 },\n      { color: '#6EE7B7', height: 160, amplitude: 10 },\n      { color: '#A7F3D0', height: 200, speed: 0.4 },\n    ],\n    [\n      { color: '#8B5CF6', height: 70, speed: 0.5 },\n      { color: '#A78BFA', height: 140, amplitude: 20 },\n      { color: '#C4B5FD', height: 210, speed: 0.7 },\n      { color: '#DDD6FE', height: 280, amplitude: 15 },\n      { color: '#EDE9FE', height: 350, speed: 0.3 },\n    ],\n  ];\n\n  return (\n    \u003cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\"\u003e\n      {wavesSets.map((waves, index) =\u003e (\n        \u003cdiv key={index} className=\"bg-white rounded-xl shadow-lg overflow-hidden\"\u003e\n          \u003cWaves\n            height={400}\n            width={400}\n            waves={waves}\n            baseSpeed={0.5}\n            baseAmplitude={20}\n          /\u003e\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n\nexport default AdvancedWavesExample;\n```\n\nThis example creates three different wave sets, each with its own color scheme and properties.\n\n## Customization\n\nYou can easily customize the appearance and behavior of the waves by adjusting the properties of each wave object. Experiment with different colors, speeds, amplitudes, and heights to create unique wave effects that match your design requirements.\n\n\n## Browser Support\n\nThe Waves component should work in all modern browsers that support HTML5 Canvas. For older browsers, consider adding a fallback or polyfill for Canvas support.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddoemonn%2Freact-waves","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fddoemonn%2Freact-waves","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddoemonn%2Freact-waves/lists"}