How to recreate this subtle grid effect?

Unity Engine
1

I’m looking to create a subtle grid “reveal” effect like this one from StarCraft 2 to use as an overlay effect for a UI panel.

A couple of things are tripping me up:

How can I repeat the grid pattern seamlessly across the dimensions of the UI panel but have the alpha fade move across the entire thing without repeating?

How would I go about doing the little “dancing dots” that trace the lines of the grid?

(I’m referring entirely to the grid, not the separate UI element that you can see in the top left corner).

2

I should have posted my code yesterday, sorry about that:

Shader "UI/Grid"
{
   Properties
   {
       _MainTex("Texture", 2D) = "black" {}
       _MaskTex("Mask Texture", 2D) = "black"{}
       _MotionTex("Motion Texture", 2D) = "black"{}
   }

   SubShader
   {
       Tags
       {
           "Queue" = "Transparent"
           "RenderType" = "Transparent"
           "PreviewType" = "Plane"
       }

       LOD 100
       ZWrite Off
       Blend SrcAlpha OneMinusSrcAlpha

       Pass
       {
           CGPROGRAM
           #pragma vertex vert
           #pragma fragment frag

           #include "UnityCG.cginc"

           struct appdata
           {
               float4 vertex : POSITION;
               float2 uv : TEXCOORD0;
           };

           struct v2f
           {
               float4 vertex : SV_POSITION;
               float2 uv : TEXCOORD0;
               float2 maskuv : TEXCOORD1;
           };

           sampler2D _MainTex;
           sampler2D _MaskTex;
           sampler2D _MotionTex;

           v2f vert(appdata v)
           {
               v2f o;
               o.vertex = UnityObjectToClipPos(v.vertex);
               o.uv = v.uv;
               o.maskuv = o.uv;

               return o;
           }

           fixed4 frag(v2f i) : SV_Target
           {
               fixed4 result = tex2D(_MainTex, i.uv);
               fixed alpha = result.a;

               fixed4 motion = tex2D(_MotionTex, i.uv);

               motion.x += _Time * 3;
               motion.y += _Time * 3;

               fixed4 mask = tex2D(_MaskTex, motion.xy) * motion.a;

               result.a = mask.rgb * alpha;

               return result;
           }
       ENDCG
       }
   }
}

And here’s what two panels look like side by side at different sizes:

As you can see, the grids scale up with the size of the panel rather than tiling / repeating, which I can’t quite figure out how to do. Ideas?

Thanks.

3

Derive your uv from screen or world space not the mesh.