Shape Dividers

Shape Divider adalah bentuk dekoratif (SVG) yang menempel di tepi sebuah section, container, atau block. Tujuannya: membuat transisi visual antar section yang lebih menarik — bukan cuma garis lurus horizontal, tapi gelombang, segitiga, zigzag, dll.

Cara pakai

Tambahkan field shapeDividers di top-level layout element (bukan di dalam style). Field-nya berupa array — bisa beberapa shape per element (misalnya wave di atas + tilt di bawah).

{
  "type": "section",
  "shapeDividers": [
    { "shape": "waves", "fill": "#ffffff", "height": "80px" }
  ],
  "children": []
}

29 Preset Shape

Horizontal (menempel di tepi atas/bawah):

• waves, wave, wave-brush
• triangle, triangle-concave, triangle-convex, triangle-double
• tilt, zigzag, stroke, stroke-2
• cloud, drops, grid-round, grid-square, round, square

Vertical (menempel di tepi kiri/kanan, semua di-prefix vertical-):

• vertical-waves, vertical-wave, vertical-wave-brush
• vertical-triangle, vertical-triangle-double, vertical-tilt
• vertical-zigzag, vertical-stroke, vertical-stroke-2
• vertical-cloud, vertical-drops, vertical-pixels

Plus custom — paste SVG markup sendiri.

Field Reference

Field	Type	Default	Keterangan
shape	enum	(wajib)	Nama preset di atas, atau "custom"
shapeCustom	string	—	Raw SVG markup (saat shape: "custom"). Disanitasi otomatis untuk XSS safety.
fill	CSS color	currentColor	Warna fill
height	CSS length	80px	Tinggi shape
width	CSS length	100%	Lebar shape
rotate	number (deg)	0	Rotasi
flipHorizontal	boolean	false	Mirror sumbu X
flipVertical	boolean	false	Mirror sumbu Y
front	boolean	false	true = di atas konten, false = di belakang konten
overflow	boolean	false	true = shape boleh keluar dari box element
horizontalAlign	enum	—	flex-start | center | flex-end
verticalAlign	enum	—	flex-start | center | flex-end
top / right / bottom / left	CSS length	—	Override align via offset eksplisit

Default behavior: kalau verticalAlign/top/bottom semua kosong, shape di-pin ke tepi bawah.

Use Case Umum

1. Hero-to-body transition — wave di bawah hero section:

{
  "type": "section",
  "shapeDividers": [{ "shape": "waves", "fill": "#ffffff", "height": "90px" }],
  "style": { "desktop": { "background": { "color": "#0a1312" } } }
}

2. Dual divider — wave di atas + tilt di bawah:

{
  "shapeDividers": [
    { "shape": "wave", "fill": "#0a1312", "height": "70px", "verticalAlign": "flex-start", "flipVertical": true },
    { "shape": "tilt", "fill": "#0a1312", "height": "80px" }
  ]
}

3. Custom SVG dari designer:

{
  "shapeDividers": [
    {
      "shape": "custom",
      "shapeCustom": "<svg viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 L1200,100 L0,100 Z'/></svg>",
      "fill": "#1a1a1a"
    }
  ]
}

Inspector UI

Buka tab Style → grup Shape Dividers (hanya muncul untuk section/container/block). Klik Add untuk menambah divider baru, lalu konfigurasi via dropdown shape + color picker + dimension fields. Beberapa divider? Reorder via tombol ↑/↓, hapus via 🗑.

Security

shapeCustom melewati sanitizer server-side sebelum di-render — menghapus <script>, event handler (onload, onclick, dll), dan referensi eksternal. Hanya tag visual yang lolos: path, polygon, g, rect, dll. Aman untuk input user.

Tips

• Pakai fill yang match warna section berikutnya untuk transisi seamless. Kalau section berikutnya #ffffff, set divider fill: "#ffffff".
• flipVertical: true pada shape yang default-nya di bawah membuat shape "muncul ke atas" — berguna untuk hero divider.
• Untuk responsive: sementara satu nilai berlaku untuk semua device. Versi device-mode menyusul.