Electromagnetic systems

Polarity Filter

let opposing states, tags, or preferences sort themselves visibly

Running the actual pattern live via applyPattern() — switch the substrate, stack overlays, watch the signals, or reverse the dynamics. Not a mock.

"Polarity Filter" — let opposing states, tags, or preferences sort themselves visibly. It has a charge layer (attract/repel charged matter), a repel layer (carve a void / keep-clear region), a attract layer (draw matter into a focus / well), and a diffuse layer (spread a quantity over the medium). The active render stack is field-lines, particles, dots, trails.

Electric pushes and pulls by sign: matching charge attracts toward the active filter, opposing charge repels, and diffuse keeps neutral items quietly stable.

Runtime tokens: charge attract/repel charged matterrepel carve a void / keep-clear regionattract draw matter into a focus / welldiffuse spread a quantity over the medium
Metrics: polarity a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertmatch a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertdistance a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert polarity, match, distance are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics: field-lines causality potential
Render: field-lines · particles · dots · trails
Reduced motion: grouped filter lanes with signed badges and separate match and conflict sections
Without motion: polarity reads as a signed badge and items live in labeled match or conflict groups

Copy this pattern

<field-root></field-root>
  <div data-body="charge" data-strength="1" data-range="380" data-spin="1" data-feedback></div>
  <div data-body="repel" data-strength="0.8" data-range="320"></div>
  <div data-body="attract" data-strength="0.7" data-range="340"></div>
  <div data-body="diffuse" data-strength="0.5" data-range="260"></div>

<script type="module">
  import '@fundamental-engine/elements';
</script>

<field-root></field-root>
  <div data-body="charge" data-strength="1" data-range="380" data-spin="1" data-feedback></div>
  <div data-body="repel" data-strength="0.8" data-range="320"></div>
  <div data-body="attract" data-strength="0.7" data-range="340"></div>
  <div data-body="diffuse" data-strength="0.5" data-range="260"></div>

import { FieldField } from '@fundamental-engine/react';

export default function PolarityFilter() {
  return (
    <FieldField>
      <div data-body="charge" data-strength="1" data-range="380" data-spin="1" data-feedback />
      <div data-body="repel" data-strength="0.8" data-range="320" />
      <div data-body="attract" data-strength="0.7" data-range="340" />
      <div data-body="diffuse" data-strength="0.5" data-range="260" />
    </FieldField>
  );
}

{
  "id": "polarity-filter",
  "name": "Polarity Filter",
  "intent": "let opposing states, tags, or preferences sort themselves visibly",
  "naturalField": "electromagnetic",
  "primitives": [
    "charge",
    "repel",
    "attract",
    "diffuse"
  ],
  "bodies": [
    {
      "body": "charge",
      "strength": 1,
      "range": 380,
      "spin": 1,
      "feedback": true
    },
    {
      "body": "repel",
      "strength": 0.8,
      "range": 320
    },
    {
      "body": "attract",
      "strength": 0.7,
      "range": 340
    },
    {
      "body": "diffuse",
      "strength": 0.5,
      "range": 260
    }
  ],
  "render": [
    "field-lines",
    "particles",
    "dots",
    "trails"
  ],
  "metrics": [
    "polarity",
    "match",
    "distance"
  ],
  "diagnostics": [
    "field-lines",
    "causality",
    "potential"
  ],
  "accessibility": {
    "reducedMotion": "grouped filter lanes with signed badges and separate match and conflict sections",
    "meaningWithoutMotion": "polarity reads as a signed badge and items live in labeled match or conflict groups"
  },
  "notes": "Electric pushes and pulls by sign: matching charge attracts toward the active filter, opposing charge repels, and diffuse keeps neutral items quietly stable.",
  "tier": "systems",
  "status": "shipped"
}

Copy this pattern

See also