first commit

sn-infographic/references/layouts/visual-tension.md

@@ -0,0 +1,36 @@
+# visual-tension
+
+Stretching, deformation, or contrast creates a pulled visual tension.
+
+## Structure
+
+- Elements appear stretched, compressed, or in conflict
+- Opposing forces implied through shape distortion or contrast
+- Visual instability that draws the eye
+- Tension resolved or unresolved depending on message
+
+## Best For
+
+- Conflict or challenge narratives
+- Before/during transformation content
+- Emotional or psychological concepts
+- Abstract concept visualization
+
+## Visual Elements
+
+- Distorted or stretched shapes
+- Opposing color or size contrasts
+- Implied force vectors (arrows, lines pulling in opposite directions)
+- Optional motion blur or deformation effects
+
+## Text Placement
+
+- Title in a stable zone outside the tension area
+- Labels near the tension points
+- Resolution text at the bottom
+
+## Recommended Pairings
+
+- `high-contrast-ad`: High-contrast tension compositions
+- `neon-futurism`: Glitch-style distortion
+- `glitch-art`: Torn and fragmented tension