• 请不要在回答技术问题时复制粘贴 AI 生成的内容
yuankui
V2EX  ›  程序员

https://vercel.com/ship 这个颗粒效果用的是什么技术?

  •  
  •   yuankui · May 23, 2024 · 4231 views
    This topic created in 901 days ago, the information mentioned may be changed or developed.

    看了下 html ,标签是 svg 标签,但是鼠标放上去之后的颗粒效果是如何实现的呢?

    image

    11 replies  •  2024-05-23 13:15:33 +08:00
    codehz
    codehz
    May 23, 2024❤️1
    1
    horizon
    horizon
    May 23, 2024
    2
    实际上有个 canvas 在
    tcper
    tcper
    May 23, 2024
    3
    背景是个 canvas ,里面粒子动效,上面盖上 svg ,事件直接穿透就行了
    supuwoerc
    supuwoerc
    May 23, 2024
    4
    js 文件大致看了眼,里面有作者信息:
    // GLSL textureless classic 2D noise "cnoise",
    // with an RSL-style periodic variant "pnoise".
    // Author: Stefan Gustavson ([email protected])
    // Version: 2011-08-22

    用到的应该是: https://github.com/stegu/webgl-noise
    DEMO:https://stegu.github.io/webgl-noise/webdemo/

    文件:
    https://vercel.com/_next/static/chunks/app/ship/2024/(home)/layout-cb52d0a03e2fb354.js?dpl=dpl_Go2ZmQEk1fFJaNjmGu2LrDzcipj4
    sunjourney
    sunjourney
    May 23, 2024
    5
    lawted
    lawted
    May 23, 2024
    6
    jaggle
    jaggle
    May 23, 2024 via iPhone
    8
    @sunjourney 你这链接打开我的手机发烫严重
    iOCZS
    iOCZS
    May 23, 2024
    9
    这种效果华而不实,夏天热浪滚滚,冬天倒是可以当暖宝宝
    AmoreLee
    AmoreLee
    May 23, 2024 via iPhone❤️2
    10
    https://basement.studio/blog/shipping-ship-behind-the-particle-shader-effect-for-vercel-s-conf

    相关文章
    davin
    davin
    May 23, 2024
    11
    刚打开的几秒内我的 mbp 卡了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1657 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 00:05 · PVG 08:05 · LAX 16:05 · JFK 19:05
    ♥ Do have faith in what you're doing.