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

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

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

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

    image

    11 replies    2024-05-23 13:15:33 +08:00
    codehz
        1
    codehz  
       May 23, 2024   ❤️ 1
    horizon
        2
    horizon  
       May 23, 2024
    实际上有个 canvas 在
    tcper
        3
    tcper  
       May 23, 2024
    背景是个 canvas ,里面粒子动效,上面盖上 svg ,事件直接穿透就行了
    supuwoerc
        4
    supuwoerc  
       May 23, 2024
    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
        5
    sunjourney  
       May 23, 2024
    lawted
        6
    lawted  
       May 23, 2024
    jaggle
        8
    jaggle  
       May 23, 2024 via iPhone
    @sunjourney 你这链接打开我的手机发烫严重
    iOCZS
        9
    iOCZS  
       May 23, 2024
    这种效果华而不实,夏天热浪滚滚,冬天倒是可以当暖宝宝
    AmoreLee
        10
    AmoreLee  
       May 23, 2024 via iPhone   ❤️ 2
    https://basement.studio/blog/shipping-ship-behind-the-particle-shader-effect-for-vercel-s-conf

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