StackBits - React UI & Full-Stack Code Library

Components > Wavy Background

🌊 Wavy Background

Transform your UI with Wavy Background, a sleek React component that creates mesmerizing wave-like animations. Designed for landing pages, hero sections, and animated backgrounds, this fluid effect adds a modern, dynamic aesthetic to any project. The smooth, flowing motion enhances engagement, making your design feel more immersive and interactive.

Preview

Wavy Background

Follow below steps 👇🏻

Install dependencies

npm i framer-motion

Component

Create a file wavy-background.tsx in your components folder and paste this code

import { motion } from 'framer-motion';
import React from 'react';

const waves = [
  {
    color: '#173C8D',
    duration: 7,
    opacity: 0.12,
    path: {
      start: {
        d: 'M 0,1080 C 0,1080 0,216 0,216 C 13.372083345349154,219.40601700027986 26.744166690698307,222.8120340005597 74,218 C 121.25583330930169,213.1879659994403 202.39541658255592,200.1578809980411 243,217 C 283.6045834174441,233.8421190019589 283.6741669790779,280.55644200727596 313,282 C 342.3258330209221,283.44355799272404 400.9079155011324,239.61635097285506 440,199 C 479.0920844988676,158.38364902714494 498.69417101639283,120.9781541013038 546,145 C 593.3058289836072,169.0218458986962 668.315400433296,254.47103262192962 703,272 C 737.684599566704,289.5289673780704 732.0442272504235,239.1377154109777 752,207 C 771.9557727495765,174.8622845890223 817.50769056501,160.97810573415958 867,169 C 916.49230943499,177.02189426584042 969.9250104895368,206.94986165238402 1005,230 C 1040.0749895104632,253.05013834761598 1056.792267476843,269.2224476563044 1094,257 C 1131.207732523157,244.77755234369562 1188.905919603091,204.1603477223984 1245,202 C 1301.094080396909,199.8396522776016 1355.584054110793,236.136161454102 1391,235 C 1426.415945889207,233.863838545898 1442.757863953738,195.29500646119368 1466,174 C 1489.242136046262,152.70499353880632 1519.3844900742556,148.68381270112334 1559,170 C 1598.6155099257444,191.31618729887666 1647.704175749239,237.96974273431294 1693,261 C 1738.295824250761,284.03025726568706 1779.7988069287885,283.43721636162485 1817,272 C 1854.2011930712115,260.56278363837515 1887.1005965356057,238.28139181918758 1920,216 C 1920,216 1920,1080 1920,1080 Z'
      },
      end: {
        d: [
          'M 0,1080 C 0,1080 0,216 0,216 C 13.372083345349154,219.40601700027986 26.744166690698307,222.8120340005597 74,218 C 121.25583330930169,213.1879659994403 202.39541658255592,200.1578809980411 243,217 C 283.6045834174441,233.8421190019589 283.6741669790779,280.55644200727596 313,282 C 342.3258330209221,283.44355799272404 400.9079155011324,239.61635097285506 440,199 C 479.0920844988676,158.38364902714494 498.69417101639283,120.9781541013038 546,145 C 593.3058289836072,169.0218458986962 668.315400433296,254.47103262192962 703,272 C 737.684599566704,289.5289673780704 732.0442272504235,239.1377154109777 752,207 C 771.9557727495765,174.8622845890223 817.50769056501,160.97810573415958 867,169 C 916.49230943499,177.02189426584042 969.9250104895368,206.94986165238402 1005,230 C 1040.0749895104632,253.05013834761598 1056.792267476843,269.2224476563044 1094,257 C 1131.207732523157,244.77755234369562 1188.905919603091,204.1603477223984 1245,202 C 1301.094080396909,199.8396522776016 1355.584054110793,236.136161454102 1391,235 C 1426.415945889207,233.863838545898 1442.757863953738,195.29500646119368 1466,174 C 1489.242136046262,152.70499353880632 1519.3844900742556,148.68381270112334 1559,170 C 1598.6155099257444,191.31618729887666 1647.704175749239,237.96974273431294 1693,261 C 1738.295824250761,284.03025726568706 1779.7988069287885,283.43721636162485 1817,272 C 1854.2011930712115,260.56278363837515 1887.1005965356057,238.28139181918758 1920,216 C 1920,216 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,216 0,216 C 46.02369189869843,184.272393906364 92.04738379739686,152.54478781272798 135,171 C 177.95261620260314,189.45521218727202 217.83415670911097,258.09324265545206 260,256 C 302.16584329088903,253.9067573445479 346.6159893661594,181.0822415654638 380,153 C 413.3840106338406,124.91775843453622 435.70188582625156,141.57779108269284 463,148 C 490.29811417374844,154.42220891730716 522.5764673288345,150.60659410376488 556,179 C 589.4235326711655,207.39340589623512 623.9922448584103,267.99583250224765 673,251 C 722.0077551415897,234.00416749775235 785.4545532375244,139.41007588724452 826,143 C 866.5454467624756,146.58992411275548 884.1895421914921,248.36386394877417 908,278 C 931.8104578085079,307.63613605122583 961.7872779965069,265.13446831765896 993,254 C 1024.2127220034931,242.86553168234107 1056.6613458224801,263.09826278059006 1101,257 C 1145.3386541775199,250.9017372194099 1201.5673387135719,218.47248055998074 1244,217 C 1286.4326612864281,215.52751944001926 1315.0692993232324,245.01181497948699 1359,253 C 1402.9307006767676,260.988185020513 1462.1554639934989,247.4802595220712 1494,259 C 1525.8445360065011,270.5197404779288 1530.3088447027733,307.0671469322283 1568,287 C 1605.6911552972267,266.9328530677717 1676.609157195407,190.25115274901546 1712,159 C 1747.390842804593,127.74884725098454 1747.254526515598,141.92824207170983 1776,159 C 1804.745473484402,176.07175792829017 1862.3727367422011,196.03587896414507 1920,216 C 1920,216 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,216 0,216 C 57.96313970619981,244.3359569139434 115.92627941239962,272.6719138278868 141,255 C 166.07372058760038,237.32808617211322 158.2580220566014,173.64830160239632 189,181 C 219.7419779433986,188.35169839760368 289.0416323611949,266.734879762528 339,267 C 388.9583676388051,267.265120237472 419.57544849861904,189.41217934749167 447,173 C 474.42455150138096,156.58782065250833 498.6565736443291,201.61640284750527 534,193 C 569.3434263556709,184.38359715249473 615.7982569240644,122.12220926248719 648,135 C 680.2017430759356,147.8777907375128 698.1503986594133,235.89476010254606 751,258 C 803.8496013405867,280.10523989745394 891.6001484382821,236.2987503273287 933,211 C 974.3998515617179,185.7012496726713 969.4490075874583,178.9102385881391 999,180 C 1028.5509924125417,181.0897614118609 1092.6038212118845,190.06029532011496 1129,195 C 1165.3961787881155,199.93970467988504 1174.135707565003,200.8485801314012 1201,199 C 1227.864292434997,197.1514198685988 1272.8533485281046,192.54538415428038 1325,177 C 1377.1466514718954,161.45461584571962 1436.4508983225799,134.96988325147734 1487,168 C 1537.5491016774201,201.03011674852266 1579.3430581815767,293.57508283981014 1604,282 C 1628.6569418184233,270.42491716018986 1636.176868951114,154.72978538928191 1671,141 C 1705.823131048886,127.2702146107181 1767.9494660139674,215.50577560306232 1814,245 C 1860.0505339860326,274.4942243969377 1890.0252669930164,245.24711219846884 1920,216 C 1920,216 1920,1080 1920,1080 Z'
        ]
      }
    }
  },
  {
    color: '#173C8D',
    duration: 6,
    opacity: 0.24,
    path: {
      start: {
        d: 'M 0,1080 C 0,1080 0,432 0,432 C 35.412935954279774,413.6191444955813 70.82587190855955,395.2382889911625 100,391 C 129.17412809144045,386.7617110088375 152.10944832004157,396.6659885309312 188,426 C 223.89055167995843,455.3340114690688 272.73633481127416,504.0977568851126 326,484 C 379.26366518872584,463.9022431148874 436.94521243486184,374.94298392861873 463,373 C 489.05478756513816,371.05701607138127 483.4828154492785,456.13030740041256 522,459 C 560.5171845507215,461.86969259958744 643.1235257680241,382.53578646973125 682,378 C 720.8764742319759,373.46421353026875 716.0230814786252,443.72654672066227 757,445 C 797.9769185213748,446.27345327933773 884.7841483174751,378.55802664761995 939,389 C 993.2158516825249,399.44197335238005 1014.8403252514747,488.04134668885786 1033,509 C 1051.1596747485253,529.9586533111421 1065.8545506766256,483.27658659694845 1093,474 C 1120.1454493233744,464.72341340305155 1159.741472042023,492.85230692334835 1205,501 C 1250.258527957977,509.14769307665165 1301.1795611552832,497.314185709658 1345,467 C 1388.8204388447168,436.685814290342 1425.540283336844,387.8909502380198 1458,383 C 1490.459716663156,378.1090497619802 1518.6593054973407,417.1220133382627 1559,457 C 1599.3406945026593,496.8779866617373 1651.822494673793,537.6209964089292 1687,509 C 1722.177505326207,480.3790035910708 1740.050715807488,382.3940010260202 1776,358 C 1811.949284192512,333.6059989739798 1865.974642096256,382.8029994869899 1920,432 C 1920,432 1920,1080 1920,1080 Z'
      },
      end: {
        d: [
          'M 0,1080 C 0,1080 0,432 0,432 C 35.412935954279774,413.6191444955813 70.82587190855955,395.2382889911625 100,391 C 129.17412809144045,386.7617110088375 152.10944832004157,396.6659885309312 188,426 C 223.89055167995843,455.3340114690688 272.73633481127416,504.0977568851126 326,484 C 379.26366518872584,463.9022431148874 436.94521243486184,374.94298392861873 463,373 C 489.05478756513816,371.05701607138127 483.4828154492785,456.13030740041256 522,459 C 560.5171845507215,461.86969259958744 643.1235257680241,382.53578646973125 682,378 C 720.8764742319759,373.46421353026875 716.0230814786252,443.72654672066227 757,445 C 797.9769185213748,446.27345327933773 884.7841483174751,378.55802664761995 939,389 C 993.2158516825249,399.44197335238005 1014.8403252514747,488.04134668885786 1033,509 C 1051.1596747485253,529.9586533111421 1065.8545506766256,483.27658659694845 1093,474 C 1120.1454493233744,464.72341340305155 1159.741472042023,492.85230692334835 1205,501 C 1250.258527957977,509.14769307665165 1301.1795611552832,497.314185709658 1345,467 C 1388.8204388447168,436.685814290342 1425.540283336844,387.8909502380198 1458,383 C 1490.459716663156,378.1090497619802 1518.6593054973407,417.1220133382627 1559,457 C 1599.3406945026593,496.8779866617373 1651.822494673793,537.6209964089292 1687,509 C 1722.177505326207,480.3790035910708 1740.050715807488,382.3940010260202 1776,358 C 1811.949284192512,333.6059989739798 1865.974642096256,382.8029994869899 1920,432 C 1920,432 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,432 0,432 C 29.879054595725805,425.312359140531 59.75810919145161,418.624718281062 95,428 C 130.2418908085484,437.375281718938 170.84661782991944,462.81348601628315 201,464 C 231.15338217008056,465.18651398371685 250.8554194888706,442.1213376538056 297,414 C 343.1445805111294,385.8786623461944 415.731704214598,352.70116336849435 454,371 C 492.268295785402,389.29883663150565 496.21776365273774,459.07400887221684 526,487 C 555.7822363472623,514.9259911277832 611.397241174451,501.0028011426387 664,495 C 716.602758825549,488.9971988573613 766.1932716494586,490.9147865572283 812,484 C 857.8067283505414,477.0852134427717 899.829672227715,461.3380526284481 935,435 C 970.170327772285,408.6619473715519 998.4880394396816,371.7330029289792 1028,363 C 1057.5119605603184,354.2669970710208 1088.218170013558,373.72993565563524 1121,403 C 1153.781829986442,432.27006434436476 1188.6392805060857,471.3472544484801 1226,462 C 1263.3607194939143,452.6527455515199 1303.2247079620997,394.88104655044424 1351,391 C 1398.7752920379003,387.11895344955576 1454.4618876455147,437.1285593497429 1480,455 C 1505.5381123544853,472.8714406502571 1500.9277414558412,458.6047160505844 1539,468 C 1577.0722585441588,477.3952839494156 1657.8271465311195,510.4525764479196 1704,502 C 1750.1728534688805,493.5474235520804 1761.76367241968,443.5849781577372 1792,425 C 1822.23632758032,406.4150218422628 1871.11816379016,419.2075109211314 1920,432 C 1920,432 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,432 0,432 C 52.02117305196343,480.5761289108691 104.04234610392686,529.1522578217382 134,509 C 163.95765389607314,488.8477421782618 171.85178863625595,399.9670976239164 214,388 C 256.14821136374405,376.0329023760836 332.5504993510495,440.9793516825962 377,459 C 421.4495006489505,477.0206483174038 433.9462139595463,448.115495645699 472,450 C 510.0537860404537,451.884504354301 573.6646448107655,484.55866573460776 601,492 C 628.3353551892345,499.44133426539224 619.3952067973914,481.6498414158702 654,476 C 688.6047932026086,470.3501585841298 766.7545279996688,476.84196860191145 813,478 C 859.2454720003312,479.15803139808855 873.5866812039334,474.982284176484 907,469 C 940.4133187960666,463.017715823516 992.898747184598,455.2288946921525 1040,443 C 1087.101252815402,430.7711053078475 1128.8183300576745,414.1021370549061 1171,436 C 1213.1816699423255,457.8978629450939 1255.8279325847047,518.3625570882232 1272,504 C 1288.1720674152953,489.63744291177676 1277.8699396035063,400.44763459220076 1316,365 C 1354.1300603964937,329.55236540779924 1440.6923090012704,347.84690454297385 1488,384 C 1535.3076909987296,420.15309545702615 1543.360824391412,474.1647472359039 1565,478 C 1586.639175608588,481.8352527640961 1621.8643934330814,435.4941065134105 1659,418 C 1696.1356065669186,400.5058934865895 1735.1816018762624,411.85882671045414 1779,419 C 1822.8183981237376,426.14117328954586 1871.4091990618688,429.0705866447729 1920,432 C 1920,432 1920,1080 1920,1080 Z'
        ]
      }
    }
  },
  {
    color: '#173C8D',
    duration: 5,
    opacity: 0.36,
    path: {
      start: {
        d: 'M 0,1080 C 0,1080 0,648 0,648 C 30.018244994887112,626.9885957565407 60.036489989774225,605.9771915130815 95,621 C 129.96351001022578,636.0228084869185 169.87228503579024,687.0798297042147 220,670 C 270.12771496420976,652.9201702957853 330.47436986706487,567.7034896700598 370,576 C 409.52563013293513,584.2965103299402 428.2302354959501,686.1062116155466 454,721 C 479.7697645040499,755.8937883844534 512.6046881491346,723.871663867754 557,711 C 601.3953118508654,698.128336132246 657.3510119075115,704.4071329134374 692,707 C 726.6489880924885,709.5928670865626 739.9912642208191,708.4998044784966 775,692 C 810.0087357791809,675.5001955215034 866.6839312092121,643.5936491725766 905,632 C 943.3160687907879,620.4063508274234 963.2730109423326,629.1255988311968 1008,638 C 1052.7269890576674,646.8744011688032 1122.224025021457,655.9039555026362 1152,669 C 1181.775974978543,682.0960444973638 1171.830888971839,699.2585791582584 1208,683 C 1244.169111028161,666.7414208417416 1326.4524190911875,617.0617278643305 1361,618 C 1395.5475809088125,618.9382721356695 1382.3594346634113,670.4945093844198 1427,657 C 1471.6405653365887,643.5054906155802 1574.109842255168,564.9602345979905 1619,569 C 1663.890157744832,573.0397654020095 1651.2011963159161,659.6645522236181 1670,663 C 1688.7988036840839,666.3354477763819 1739.0853724811668,586.3815565075377 1786,570 C 1832.9146275188332,553.6184434924623 1876.4573137594166,600.8092217462312 1920,648 C 1920,648 1920,1080 1920,1080 Z'
      },
      end: {
        d: [
          'M 0,1080 C 0,1080 0,648 0,648 C 30.018244994887112,626.9885957565407 60.036489989774225,605.9771915130815 95,621 C 129.96351001022578,636.0228084869185 169.87228503579024,687.0798297042147 220,670 C 270.12771496420976,652.9201702957853 330.47436986706487,567.7034896700598 370,576 C 409.52563013293513,584.2965103299402 428.2302354959501,686.1062116155466 454,721 C 479.7697645040499,755.8937883844534 512.6046881491346,723.871663867754 557,711 C 601.3953118508654,698.128336132246 657.3510119075115,704.4071329134374 692,707 C 726.6489880924885,709.5928670865626 739.9912642208191,708.4998044784966 775,692 C 810.0087357791809,675.5001955215034 866.6839312092121,643.5936491725766 905,632 C 943.3160687907879,620.4063508274234 963.2730109423326,629.1255988311968 1008,638 C 1052.7269890576674,646.8744011688032 1122.224025021457,655.9039555026362 1152,669 C 1181.775974978543,682.0960444973638 1171.830888971839,699.2585791582584 1208,683 C 1244.169111028161,666.7414208417416 1326.4524190911875,617.0617278643305 1361,618 C 1395.5475809088125,618.9382721356695 1382.3594346634113,670.4945093844198 1427,657 C 1471.6405653365887,643.5054906155802 1574.109842255168,564.9602345979905 1619,569 C 1663.890157744832,573.0397654020095 1651.2011963159161,659.6645522236181 1670,663 C 1688.7988036840839,666.3354477763819 1739.0853724811668,586.3815565075377 1786,570 C 1832.9146275188332,553.6184434924623 1876.4573137594166,600.8092217462312 1920,648 C 1920,648 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,648 0,648 C 22.997580952689077,648.8074464121196 45.995161905378154,649.6148928242391 84,663 C 122.00483809462185,676.3851071757609 175.01693333117646,702.3478751151632 232,702 C 288.98306666882354,701.6521248848368 349.9371047699159,674.9936067151081 378,652 C 406.0628952300841,629.0063932848919 401.23464758915986,609.6776980244043 430,610 C 458.76535241084014,610.3223019755957 521.1243048734444,630.2956011872749 570,632 C 618.8756951265556,633.7043988127251 654.2681329170622,617.1398972264966 688,615 C 721.7318670829378,612.8601027735034 753.8031634583067,625.1448099067388 797,633 C 840.1968365416933,640.8551900932612 894.5192132497108,644.2808631465481 926,634 C 957.4807867502892,623.7191368534519 966.1199835428499,599.7317375070687 997,597 C 1027.88001645715,594.2682624929313 1081.000852578889,612.7921868251772 1131,631 C 1180.999147421111,649.2078131748228 1227.8766061415947,667.0995151922224 1275,667 C 1322.1233938584053,666.9004848077776 1369.4927228547317,648.809752405933 1396,651 C 1422.5072771452683,653.190247594067 1428.152502439478,675.6614751840457 1461,680 C 1493.847497560522,684.3385248159543 1553.8972673873561,670.5443468578845 1606,667 C 1658.1027326126439,663.4556531421155 1702.2584280110966,670.1611373844156 1728,661 C 1753.7415719889034,651.8388626155844 1761.0690205682579,626.8111036044527 1790,622 C 1818.9309794317421,617.1888963955473 1869.4654897158712,632.5944481977737 1920,648 C 1920,648 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,648 0,648 C 44.558809425698,670.7837254585313 89.117618851396,693.5674509170627 121,677 C 152.882381148604,660.4325490829373 172.088334020114,604.5139217902806 214,603 C 255.911665979886,601.4860782097194 320.5290450681481,654.3768619218151 362,663 C 403.4709549318519,671.6231380781849 421.7954857072936,635.978630522459 447,646 C 472.2045142927064,656.021369477541 504.2890121026776,711.708615988349 543,717 C 581.7109878973224,722.291384011651 627.0484658819962,677.1869055241449 668,648 C 708.9515341180038,618.8130944758551 745.5171243693377,605.5437619150715 782,620 C 818.4828756306623,634.4562380849285 854.8830366406532,676.6380468155696 904,694 C 953.1169633593468,711.3619531844304 1014.9507290680494,703.9040508226502 1054,699 C 1093.0492709319506,694.0959491773498 1109.3140470871497,691.7457498938298 1130,685 C 1150.6859529128503,678.2542501061702 1175.793082583352,667.1129496020301 1222,670 C 1268.206917416648,672.8870503979699 1335.5136225794424,689.8024516980497 1386,690 C 1436.4863774205576,690.1975483019503 1470.1524270988787,673.6772436057713 1494,638 C 1517.8475729011213,602.3227563942287 1531.8766690250427,547.4885738788654 1565,572 C 1598.1233309749573,596.5114261211346 1650.3408968009496,700.368460878767 1694,713 C 1737.6591031990504,725.631539121233 1772.7597437711572,647.0375826060665 1809,621 C 1845.2402562288428,594.9624173939335 1882.6201281144213,621.4812086969667 1920,648 C 1920,648 1920,1080 1920,1080 Z'
        ]
      }
    }
  },
  {
    color: '#173C8D',
    duration: 4,
    opacity: 0.48,
    path: {
      start: {
        d: 'M 0,1080 C 0,1080 0,864 0,864 C 62.35636947543405,901.2284558082582 124.7127389508681,938.4569116165164 153,917 C 181.2872610491319,895.5430883834836 175.50541367196166,815.4008093421928 212,800 C 248.49458632803834,784.5991906578072 327.2656063612852,833.9398510147122 369,836 C 410.7343936387148,838.0601489852878 415.4321608828975,792.8397865989585 436,806 C 456.5678391171025,819.1602134010415 493.0057501071245,890.7010025894538 527,911 C 560.9942498928755,931.2989974105462 592.544838688604,900.3562030432269 635,896 C 677.455161311396,891.6437969567731 730.8148951384593,913.8741852376387 786,925 C 841.1851048615407,936.1258147623613 898.1955807575598,936.1470560062178 929,915 C 959.8044192424402,893.8529439937822 964.4027818313018,851.5375907374904 995,822 C 1025.5972181686982,792.4624092625096 1082.1932919172332,775.7025810438207 1130,784 C 1177.8067080827668,792.2974189561793 1216.8240504997657,825.652085087227 1250,849 C 1283.1759495002343,872.347914912773 1310.5105060837045,885.6890786072715 1342,903 C 1373.4894939162955,920.3109213927285 1409.1339251654165,941.591600483687 1449,944 C 1488.8660748345835,946.408399516313 1532.9537932546305,929.9445194579807 1583,913 C 1633.0462067453695,896.0554805420193 1689.0509018160608,878.6303216843897 1735,865 C 1780.9490981839392,851.3696783156103 1816.8425994811255,841.5341938044601 1846,842 C 1875.1574005188745,842.4658061955399 1897.5787002594373,853.23290309777 1920,864 C 1920,864 1920,1080 1920,1080 Z'
      },
      end: {
        d: [
          'M 0,1080 C 0,1080 0,864 0,864 C 62.35636947543405,901.2284558082582 124.7127389508681,938.4569116165164 153,917 C 181.2872610491319,895.5430883834836 175.50541367196166,815.4008093421928 212,800 C 248.49458632803834,784.5991906578072 327.2656063612852,833.9398510147122 369,836 C 410.7343936387148,838.0601489852878 415.4321608828975,792.8397865989585 436,806 C 456.5678391171025,819.1602134010415 493.0057501071245,890.7010025894538 527,911 C 560.9942498928755,931.2989974105462 592.544838688604,900.3562030432269 635,896 C 677.455161311396,891.6437969567731 730.8148951384593,913.8741852376387 786,925 C 841.1851048615407,936.1258147623613 898.1955807575598,936.1470560062178 929,915 C 959.8044192424402,893.8529439937822 964.4027818313018,851.5375907374904 995,822 C 1025.5972181686982,792.4624092625096 1082.1932919172332,775.7025810438207 1130,784 C 1177.8067080827668,792.2974189561793 1216.8240504997657,825.652085087227 1250,849 C 1283.1759495002343,872.347914912773 1310.5105060837045,885.6890786072715 1342,903 C 1373.4894939162955,920.3109213927285 1409.1339251654165,941.591600483687 1449,944 C 1488.8660748345835,946.408399516313 1532.9537932546305,929.9445194579807 1583,913 C 1633.0462067453695,896.0554805420193 1689.0509018160608,878.6303216843897 1735,865 C 1780.9490981839392,851.3696783156103 1816.8425994811255,841.5341938044601 1846,842 C 1875.1574005188745,842.4658061955399 1897.5787002594373,853.23290309777 1920,864 C 1920,864 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,864 0,864 C 43.4906846044734,820.6272939412673 86.9813692089468,777.2545878825347 135,803 C 183.0186307910532,828.7454121174653 235.5652077686861,923.608942411129 262,943 C 288.4347922313139,962.391057588871 288.7577997163087,906.3096424729493 313,867 C 337.2422002836913,827.6903575270507 385.4035933660791,805.1524876970739 424,823 C 462.5964066339209,840.8475123029261 491.62782681937483,899.0804067387554 537,897 C 582.3721731806252,894.9195932612446 644.0850993564212,832.5258853479043 692,808 C 739.9149006435788,783.4741146520957 774.0317757549401,796.8160518696276 803,808 C 831.9682242450599,819.1839481303724 855.787797623818,828.2099071735856 894,837 C 932.212202376182,845.7900928264144 984.8170337497882,854.34431943603 1028,871 C 1071.1829662502118,887.65568056397 1104.9440673770298,912.4128150822946 1147,886 C 1189.0559326229702,859.5871849177054 1239.4066967420931,782.0044202347918 1281,795 C 1322.5933032579069,807.9955797652082 1355.4291456545982,911.5695039785383 1383,915 C 1410.5708543454018,918.4304960214617 1432.876720639514,821.7175638510548 1466,801 C 1499.123279360486,780.2824361489452 1543.0639717873466,835.560240617243 1573,854 C 1602.9360282126534,872.439759382757 1618.867392211099,854.041473679973 1654,865 C 1689.132607788901,875.958526320027 1743.4664593682573,916.2738646628648 1791,921 C 1838.5335406317427,925.7261353371352 1879.2667703158713,894.8630676685676 1920,864 C 1920,864 1920,1080 1920,1080 Z',
          'M 0,1080 C 0,1080 0,864 0,864 C 49.99570805656474,839.7155819070151 99.99141611312947,815.4311638140301 136,828 C 172.00858388687053,840.5688361859699 194.0300436040468,889.9909266508943 224,898 C 253.9699563959532,906.0090733491057 291.88840947068326,872.605129582393 334,870 C 376.11159052931674,867.394870417607 422.41631851322023,895.5885550195329 459,900 C 495.58368148677977,904.4114449804671 522.4463164764355,885.0406503394757 559,903 C 595.5536835235645,920.9593496605243 641.7984155810377,976.248843622564 678,943 C 714.2015844189623,909.751156377436 740.3600211994134,787.9639751702683 767,787 C 793.6399788005866,786.0360248297317 820.761499621309,905.8952556963632 863,933 C 905.238500378691,960.1047443036368 962.593980315351,894.455002044279 1013,874 C 1063.406019684649,853.544997955721 1106.8625791172874,878.2847361265209 1144,892 C 1181.1374208827126,905.7152638734791 1211.955703215499,908.406053449637 1247,912 C 1282.044296784501,915.593946550363 1321.3146080207175,920.0910500749308 1359,890 C 1396.6853919792825,859.9089499250692 1432.7858647016312,795.2297462506401 1478,784 C 1523.2141352983688,772.7702537493599 1577.5419331727585,814.9899649225089 1609,849 C 1640.4580668272415,883.0100350774911 1649.0464026073341,908.8103940593245 1690,921 C 1730.9535973926659,933.1896059406755 1804.2724563979045,931.7684588401929 1848,920 C 1891.7275436020955,908.2315411598071 1905.8637718010477,886.1157705799035 1920,864 C 1920,864 1920,1080 1920,1080 Z'
        ]
      }
    }
  }
];

type WavyBackgroundProps = {
  children?: React.ReactNode;
};

const WavyBackground = ({ children }: WavyBackgroundProps) => {
  return (
    <div className="w-full h-full relative">
      <div className="relative z-10 h-full w-full">{children}</div>

      <motion.svg
        viewBox="0 0 1920 1080"
        preserveAspectRatio="xMidYMid slice"
        className="absolute w-full h-full z-0 top-0 left-0"
      >
        <rect width="1920" height="1080" fill="#376FCB" className="h-full w-full" />
        {waves.map((wave, i) => {
          return (
            <motion.path
              key={i}
              fill={wave.color}
              fillOpacity={wave.opacity}
              variants={wave.path}
              initial="start"
              animate={'end'}
              transition={{
                duration: wave.duration + 7,
                repeat: Infinity,
                repeatType: 'reverse',
                ease: 'linear'
              }}
            />
          );
        })}
      </motion.svg>
    </div>
  );
};

export default WavyBackground;

Usage

<WavyBackground>
  <div className="h-full w-full flex items-center justify-center">
    <p className="text-black font-extrabold text-xl">Wavy Background</p>
  </div>
</WavyBackground>