feat: add AI Assistant shader and integrate into shader list with customizable properties

Author: orestesgaolin

assets/screenshots/ai-assistant.png

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'dart:ui';
+import 'shader_builder.dart';
+
+class AiAssistantShaderBuilder extends CustomShaderBuilder {
+  const AiAssistantShaderBuilder();
+
+  @override
+  bool get requiresImageSampler => false;
+
+  @override
+  Duration? get animationDuration => null; // Unbounded animation
+
+  @override
+  void setUniforms(FragmentShader shader, Size size, double time) {
+    shader
+      ..setFloat(0, size.width)
+      ..setFloat(1, size.height)
+      ..setFloat(2, time);
+  }
+
+  @override
+  Widget buildShader(
+    ShaderMetadata metadata,
+    FragmentShader shader,
+    Size size,
+    double time,
+    Widget? child,
+  ) {
+    return ClipRect(
+      child: CustomPaint(
+        size: Size.infinite,
+        painter: _AiAssistantShaderPainter(shader),
+      ),
+    );
+  }
+
+  @override
+  Widget? childBuilder(BuildContext context) {
+    return null;
+  }
+}
+
+class _AiAssistantShaderPainter extends CustomPainter {
+  final FragmentShader shader;
+
+  _AiAssistantShaderPainter(this.shader);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.drawRect(
+      Rect.fromLTWH(0, 0, size.width, size.height),
+      Paint()..shader = shader,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
+}

lib/ai_assistant_shader_builder.dart

@@ -16,6 +16,7 @@ import 'noise_shader_builder.dart';
 import 'ntsc_shader_builder.dart';
 import 'rings_shader_builder.dart';
 import 'shader_screen.dart';
+import 'ai_assistant_shader_builder.dart';
 
 void main() {
   usePathUrlStrategy();
@@ -32,6 +33,8 @@ class ShaderInfo {
   final DateTime dateAdded;
   final CustomShaderBuilder builder;
   final String path;
+  final EdgeInsetsGeometry? padding;
+  final Color? backgroundColor;
 
   const ShaderInfo({
     required this.name,
@@ -42,6 +45,8 @@ class ShaderInfo {
     required this.dateAdded,
     required this.builder,
     required this.path,
+    this.padding,
+    this.backgroundColor,
   });
 
   ShaderMetadata get metadata => ShaderMetadata(
@@ -114,6 +119,18 @@ final shaders = [
     builder: const ClearlyBugShaderBuilder(),
     path: 'clearly-bug-shader',
   ),
+  ShaderInfo(
+    name: 'AI Assistant',
+    assetKey: 'shaders/ai_assistant.frag',
+    description: 'A rotating effect resembling an AI assistant.',
+    sourceUrl: 'https://www.shadertoy.com/view/MXsyzl',
+    author: 'Saphirah',
+    dateAdded: DateTime(2025, 8, 21),
+    builder: const AiAssistantShaderBuilder(),
+    path: 'ai-assistant',
+    padding: EdgeInsets.all(32),
+    backgroundColor: Colors.black,
+  ),
 ];
 
 // Helper function to create URL-safe shader names

lib/main.dart

@@ -52,56 +52,62 @@ class _ShaderAnimationViewState extends State<ShaderAnimationView> with SingleTi
 
   @override
   Widget build(BuildContext context) {
-    return LayoutBuilder(
-      builder: (context, size) {
-        return AnimatedBuilder(
-          animation: _controller,
-          builder: (context, child) {
-            return ShaderBuilder(
-              assetKey: widget.shaderInfo.assetKey,
-              (context, shader, _) {
-                final duration = widget.shaderInfo.builder.animationDuration;
-                double timeValue;
+    return ColoredBox(
+      color: widget.shaderInfo.backgroundColor ?? Colors.transparent,
+      child: Padding(
+        padding: widget.shaderInfo.padding ?? EdgeInsets.zero,
+        child: LayoutBuilder(
+          builder: (context, size) {
+            return AnimatedBuilder(
+              animation: _controller,
+              builder: (context, child) {
+                return ShaderBuilder(
+                  assetKey: widget.shaderInfo.assetKey,
+                  (context, shader, _) {
+                    final duration = widget.shaderInfo.builder.animationDuration;
+                    double timeValue;
 
-                if (duration != null) {
-                  // Bounded animation - use animated value between 0-1
-                  final animation = TweenSequence<double>([
-                    TweenSequenceItem(
-                      tween: Tween<double>(
-                        begin: 0.0,
-                        end: 1.0,
-                      ).chain(CurveTween(curve: Curves.easeInOut)),
-                      weight: 50.0,
-                    ),
-                    TweenSequenceItem(
-                      tween: Tween<double>(
-                        begin: 1.0,
-                        end: 0.0,
-                      ).chain(CurveTween(curve: Curves.easeInOut)),
-                      weight: 50.0,
-                    ),
-                  ]).animate(_controller);
-                  timeValue = animation.value;
-                } else {
-                  // Unbounded animation - use controller value as continuous time
-                  // Scale the 0-1 controller value to actual time in seconds
-                  timeValue = _controller.value * _controller.duration!.inSeconds;
-                }
+                    if (duration != null) {
+                      // Bounded animation - use animated value between 0-1
+                      final animation = TweenSequence<double>([
+                        TweenSequenceItem(
+                          tween: Tween<double>(
+                            begin: 0.0,
+                            end: 1.0,
+                          ).chain(CurveTween(curve: Curves.easeInOut)),
+                          weight: 50.0,
+                        ),
+                        TweenSequenceItem(
+                          tween: Tween<double>(
+                            begin: 1.0,
+                            end: 0.0,
+                          ).chain(CurveTween(curve: Curves.easeInOut)),
+                          weight: 50.0,
+                        ),
+                      ]).animate(_controller);
+                      timeValue = animation.value;
+                    } else {
+                      // Unbounded animation - use controller value as continuous time
+                      // Scale the 0-1 controller value to actual time in seconds
+                      timeValue = _controller.value * _controller.duration!.inSeconds;
+                    }
 
-                widget.shaderInfo.builder.setUniforms(shader, size.biggest, timeValue);
+                    widget.shaderInfo.builder.setUniforms(shader, size.biggest, timeValue);
 
-                return widget.shaderInfo.builder.buildShader(
-                  widget.shaderInfo.metadata,
-                  shader,
-                  size.biggest,
-                  timeValue,
-                  widget.shaderInfo.builder.childBuilder(context),
+                    return widget.shaderInfo.builder.buildShader(
+                      widget.shaderInfo.metadata,
+                      shader,
+                      size.biggest,
+                      timeValue,
+                      widget.shaderInfo.builder.childBuilder(context),
+                    );
+                  },
                 );
               },
             );
           },
-        );
-      },
+        ),
+      ),
     );
   }
 }

lib/widgets/shader_animation_view.dart

@@ -19,9 +19,12 @@ class ShaderCard extends StatelessWidget {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Image.asset(
-              'assets/screenshots/${shaderInfo.path}.png',
-              fit: BoxFit.cover,
+            AspectRatio(
+              aspectRatio: 16 / 9,
+              child: Image.asset(
+                'assets/screenshots/${shaderInfo.path}.png',
+                fit: BoxFit.cover,
+              ),
             ),
             Padding(
               padding: const EdgeInsets.all(8.0),

lib/widgets/shader_card.dart

@@ -49,3 +49,4 @@ flutter:
     - shaders/ntsc_shader.frag
     - shaders/rings_shader.frag
     - shaders/clearly_bug_shader.frag
+    - shaders/ai_assistant.frag

pubspec.yaml

@@ -0,0 +1,93 @@
+#version 460 core
+precision mediump float;
+
+#include <flutter/runtime_effect.glsl>
+
+uniform vec2 iResolution;
+uniform float iTime;
+
+out vec4 fragColor;
+
+// CONFIGURATION
+
+//Layers
+float layerCount = 2.0;
+float numberOfBlobsPerLayer = 3.0; // One side is hidden to make it more irregular
+
+// Size
+float circleSize = 0.9; // 0-1
+float borderSize = 0.015; // 0-1
+
+// Animations
+float pulseAnimationStrength = 0.02; // 0-1
+float pulseAnimationSpeed = 1.0;
+
+#define PI 3.14159265358979323846264338327950288
+#define positiveSin(number) (sin(number) + 1.0) / 2.0
+#define remap(number, oldMin, oldMax, newMin, newMax) (number - oldMin) / (oldMax - oldMin) * (newMax - newMin) + newMin
+
+float saturate(float number){
+    return clamp(number, 0.0, 1.0);
+}
+
+float radialGradient(vec2 uv){
+    float distanceToCenter = distance(vec2(0.5, 0.5), uv);
+    vec2 uvRadial = uv - vec2(0.5, 0.5);
+    float angle = atan(uvRadial.y, uvRadial.x);
+    float radialGradient = (angle + PI) / (2.0 * PI);
+    return radialGradient;
+}
+
+
+float getNumberOfLayers(){
+    return layerCount * positiveSin(iTime * PI);
+}
+
+float getCircleSize(){
+    float circleAnimation01 = positiveSin(iTime * pulseAnimationSpeed); //This can be replaced with volume input
+    float circleSizeWithoutBorder = circleSize - borderSize * 2.0;
+    float pulseAnimationStrengthMapped = remap(pulseAnimationStrength, 0.0, 1.0, 0.0, circleSizeWithoutBorder);
+    return remap(circleAnimation01, 0.0, 1.0, circleSizeWithoutBorder - pulseAnimationStrengthMapped, circleSizeWithoutBorder);
+}
+
+float circleMask(float distance){
+    float circleSizeConfigured = 1.0 / (getCircleSize() * 0.5);
+    return pow(saturate(distance * circleSizeConfigured), 50.0);
+}
+
+void main()
+{
+    vec2 fragCoord = FlutterFragCoord().xy;
+    // UV Map
+    float aspectRatio = iResolution.x / iResolution.y;
+    vec2 uv = fragCoord / iResolution.xy * vec2(aspectRatio, 1.0) + vec2(1.0 - aspectRatio, 0.0) * 0.5;
+
+    // Color Gradient
+    vec3 color = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0,2,4));
+    vec4 initialColor = vec4(color,1.0);
+    
+    // Radial UV Map
+    float distanceToCenter = distance(vec2(0.5, 0.5), uv);
+    float radial = radialGradient(uv);
+        
+    // Generate Circle Mask
+    float innerCircleMask = circleMask(distanceToCenter);
+    float outerCircleMask = 0.0;
+    float layers = getNumberOfLayers();
+    
+    // Generate Moving Blobs
+    for(int i = 0; i <= 3; i++){
+        float x = float(i);
+        float layerWeight = positiveSin(iTime * x * 0.572); //
+        // float layerWeight = saturate(layers - x);
+
+        float rotationSpeed = sin((x + 1.0) * 4.62843) * 0.4;
+        float distance = (1.0 - getCircleSize()) / 2.0 * (layerWeight - borderSize);
+        float distanceNoise = saturate(sin(mod(radial + iTime * rotationSpeed, 1.0) * PI * numberOfBlobsPerLayer) * distance);
+        outerCircleMask += circleMask(distanceToCenter - distanceNoise - borderSize) / 3.0;
+    }
+    
+    //Combine Masks
+    outerCircleMask = saturate(outerCircleMask);
+    fragColor = initialColor * (innerCircleMask - outerCircleMask) ;
+}