// GLSL fragment shader for realistic chromatic glass refraction
precision highp float;
uniform vec2 u_resolution;
uniform sampler2D u_texture;
uniform float u_refractionStrength;
uniform float u_chromaticDispersion;

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 normal = texture2D(u_texture, uv).xy * 2.0 - 1.0;
    
    // Chromatic aberration split across RGB wavelengths
    float r = texture2D(u_texture, uv + normal * u_refractionStrength * (1.0 + u_chromaticDispersion)).r;
    float g = texture2D(u_texture, uv + normal * u_refractionStrength).g;
    float b = texture2D(u_texture, uv + normal * u_refractionStrength * (1.0 - u_chromaticDispersion)).b;
    
    gl_FragColor = vec4(r, g, b, 1.0);
}

// Architectural sketch: Exposing Figma frames to an autonomous code-generation agent
interface FigmaNodeSchema {
  id: string;
  name: string;
  type: 'FRAME' | 'TEXT' | 'COMPONENT';
  layoutMode: 'AUTO_LAYOUT_VERTICAL' | 'AUTO_LAYOUT_HORIZONTAL';
  itemSpacing: number;
  padding: { top: number; right: number; bottom: number; left: number };
}

export function figmaLayoutToTailwind(node: FigmaNodeSchema): string {
  const isVertical = node.layoutMode === 'AUTO_LAYOUT_VERTICAL';
  const flexDir = isVertical ? 'flex flex-col' : 'flex flex-row';
  const gap = `gap-[${node.itemSpacing}px]`;
  const pad = `p-[${node.padding.top}px]`;
  
  return `${flexDir} ${gap} ${pad}`;
}

1/4 🎨 @figma is turning the design canvas into a programmable shader engine:
Their latest release lets you generate custom GLSL fragment shaders, automate motion curves, and render real-time light refraction through glass directly in your canvas.

2/4 The era of static vector boxes is over.
Modern interfaces demand dynamic, responsive physics. By integrating generative shaders and motion agents, Figma closes the gap between what designers conceptualize and what WebGL/React can execute.

3/4 With the new MCP (Model Context Protocol) integration:
AI coding agents can now read Figma component trees natively, inspect auto-layout tokens, and scaffold production-ready React code without manual redlining.

4/4 Follow @figma for the forefront of design systems, shader exploration, and agentic workflows.