PĀRSA ATELIERآتلیه پارسا
MOODBOARD · SECTION III
آتلیه پارسا
PĀRSA ATELIER

A living library of Persian web elements — buttons, type, cards, ornament generators, cursor physics and a parametric type foundry — every piece tuned by sliders, every piece exportable as code.

HOW TO USE — hover everything (the page listens to your cursor). Drag the sliders: the COPY CODE button on each element always exports a self-contained snippet with your current slider values baked in. Paste snippets straight into your Persian site builds, or hand them to Claude as a design-system seed. SVG generators copy raw <svg> markup.
CURSOR-MAGNETIC BUTTONSORNAMENT GENERATORS ◈ TYPE FOUNDRY — قلم‌خانه
01

TOKENS & PALETTESرنگ و نشان

TECH · CSS custom-property theming + Clipboard API

Six palettes pulled straight off the moodboard references. Click any swatch to copy its hex; copy a whole palette as CSS variables and drop it into any build — every element below can be re-skinned by these six moods.

TOK-07 MOTIF LEXICON — click a motif to copy an image-generation prompt seed واژه‌نامهٔ نقش
Your iconography vocabulary, encoded as ready prompt seeds (palette + style baked in). Paste them into any image model — or into Claude — to generate on-brand Persian graphics instead of generic ones.
02

BUTTONSدکمه‌ها

TECH · magnetic lerp physics · conic shimmer · clip-path

Six button species. They lean toward your cursor, shimmer with gold leaf, fill with kilim weave, burst with lion-sun rays. Tune each with sliders — COPY CODE exports the exact button you tuned.

BTN-01 GOLD SHIMMER زر
A rotating conic gold-leaf edge (no images) + a sheen that sweeps on hover. Your primary CTA.
BTN-02 MIHRAB ARCH محراب
The pointed-niche silhouette from the carpet reference, as a button. Hover floods it from below.
BTN-03 KILIM WEAVE گلیم
A four-gradient chevron weave that starts marching when hovered — the loom never stops.
BTN-04 MAGNETIC LION-SUN شیر و خورشید
It leans toward your cursor (spring-lerp physics) and bursts sun-rings on click. For the one action that matters.
BTN-05 CUNEIFORM CUT میخی
Chisel-cut corners and wedge marks — Persepolis stone-cutting as a clip-path. Hover inverts to solid gold.
BTN-06 QALAM GHOST قلم
A ghost link: hover and a reed-pen stroke writes the underline while the label flips English → Persian.
03

TYPOGRAPHYحروف‌نگاری

TECH · cursor-driven variable-font axes (per-glyph wght)

Curated Persian ↔ Latin font marriages (all free on Google Fonts), plus type that physically responds to your cursor — each letter's weight is a function of its distance to the pointer.

TYP-01 PROXIMITY INK — letters gain weight near your cursor جوهر زنده
Vazirmatn is a variable font — its weight axis is driven live by cursor distance per glyph, like ink pooling under the pen. Persian input is weighted word-by-word so letter joining stays intact.
TYP-02 PAIRING · POSTER پیوند
بوی جوی مولیان آید همی
THE SCENT OF THE MULIYĀN STREAM — RUDAKI
LALEZAR (FA DISPLAY) ⇄ SPACE GROTESK (EN UI)
Loud, warm street-poster Persian against cool grotesk labeling. Landing pages, merch, event flyers.
TYP-03 PAIRING · POETRY شعر
از محبت خارها گل می‌شود
Through love, thorns become roses — Rumi
AREF RUQAA (FA CALLIGRAPHIC) ⇄ CORMORANT (EN LITERARY)
Ruqʿa-school curves beside old-style italics. Editorial, poetry, wedding and gallery work.
TYP-04 PAIRING · MONUMENT سنگ
خرد رهنمای و خرد دلگشای
WISDOM GUIDES, WISDOM GLADDENS — FERDOWSI
REEM KUFI (GEOMETRIC) ⇄ MARCELLUS (LAPIDARY EN)
Kufic geometry meets Roman inscription — both born of the chisel. Brand marks, headers, institutions.
TYP-05 PAIRING · MANUSCRIPT نسخه
چون که گل رفت و گلستان شد خراب
Naskh classicism with a modern Persian workhorse for UI & body.
AMIRI (FA CLASSICAL) ⇄ VAZIRMATN (FA/EN WORKHORSE)
Long-form reading: Amiri for quoted verse and headings, Vazirmatn 100–900 for everything else, both scripts.
TYP-06 ZARNEGAR — GOLD ENGRAVED زرنگار
SHĀHNĀMEH
Gold-leaf gradient clipped into the glyphs, embossed with a drop shadow; hovering pours the light down the letters (background-position slide).
TYP-07 KASHIDA BANNER — the elastic stroke کشیده
بـازار بزرگ
THE GRAND BAZAAR
Kashida (تطویل) is Persian calligraphy's own justification: the connecting stroke stretches. The slider inserts real U+0640 tatweel characters live, while the Latin line answers with letter-spacing — one gesture, two scripts.
04

CARDS & SURFACESکارت‌ها

TECH · pointer-vector 3D tilt + specular glare

Mihrab-arch frames, Shaatir tile mosaics that flip, and a card that tilts in 3D toward your cursor with a moving gold glare — the physics of a glossy tile in lamplight.

CRD-01 MIHRAB FRAME محراب
دروازهٔ ملل
GATE OF ALL NATIONS
Content framed by the niche — hover and the tiled half-dome wakes with radiating gold.
The Pantone-card arch from your carpet reference, generalized into a content card. Radiating dot-tiles appear only on hover (repeating-radial-gradient — no images).
CRD-02 TILT & GLARE کاشی براق

GLAZED TILE

کاشی لعاب‌دار

A glossy ceramic in lamplight: the card rotates toward your cursor in 3D and a gold specular highlight tracks the pointer across the glaze.

Pointer position → rotateX/rotateY + a radial glare pinned to the cursor. The star floats on its own Z-plane (translateZ) for real parallax.
CRD-03 SHAATIR MOSAIC موزاییک
The tile-grid identity system from your café reference: letters and motifs share a checker of palette colours; each tile flips to its counterpart on hover.
CRD-04 CARPET BORDER حاشیهٔ قالی

FIELD & BORDER

Every Persian carpet is a bordered universe: a woven guard band, a dashed inner rule, a medallion at heart.

The guard band is a border-image built from a repeating 45° gradient — resolution-independent weave, no assets.
05

ORNAMENT GENERATORSتذهیب

TECH · parametric SVG path synthesis · copy-as-SVG

Not clip-art — equations. Kilim bands, eslimi scroll dividers, star-and-cross friezes and pointed-arch frames are generated live from your sliders, then copied out as clean standalone SVG.

ORN-01 KILIM BAND گلیم
The sawtooth guard band of every kilim, as pure geometry. Use it as hero dividers, footer trims, or e-mail headers — it exports as a crisp standalone SVG at any width.
ORN-02 ESLIMI SCROLL DIVIDER اسلیمی
Arabesque tendrils are logarithmic-ish spirals hanging off a rule, meeting at a star medallion. Section breaks, chapter ends, wedding suites.
ORN-03 STAR & CROSS FRIEZE ستاره و چلیپا
The eight-point star row from your black tribal sheet. Alternating stars and diamonds — headers, borders, loading strips, laser-cut stencils.
ORN-04 MIHRAB FRAME GENERATOR قاب محراب
A pointed-arch frame from two blended cubic curves — slide POINT from Byzantine-round to razor-sharp Persian. Drop your photography or hero copy inside.
06

CURSOR EFFECTSنشانگر

TECH · pointer-velocity particle emitters (canvas)

A playground of pointer trails for your sites: gold dust, wet lapis ink, turquoise tile ripples, desert wind. Velocity feeds the emitter — flick the cursor and watch it answer.

CUR-01 POINTER ALCHEMY — four trail species کیمیای نشانگر
MOVE · FLICK · CLICK
Velocity feeds every emitter — a slow hand whispers, a flick shouts.
07

NAVIGATIONناوبری

TECH · FLIP sliding indicator · SVG dash-draw underlines

A tab bar whose active state is a gliding Persian arch, and links underlined by a calligraphic stroke that draws itself on hover.

NAV-01 ARCH TABS — the gliding mihrab تب‌های محرابی
The active state is a little arch that glides and stretches to each tab (measured FLIP-style, sprung with an overshoot bezier). Bilingual labels stacked FA-over-EN.
NAV-02 QALAM LINKS — reed-pen underlines پیوند قلمی
Every link owns a unique hand-drawn stroke (seeded random bezier) that writes itself on hover — no two underlines in your nav are the same, like a scribe's hand.
08

LOADERSبارگیری

TECH · stroke-dasharray choreography

Waiting, but make it Persepolis: an eight-point star that laces itself, twin girih squares in counter-rotation, and a mosaic that tiles itself into being.

LDR-01 STAR LACE ستارهٔ گردان
A dash of light laces around the eight-point star while the whole seal slowly turns — two nested rotations from one dasharray.
LDR-02 GIRIH TWINS گره دوگانه
Two squares in counter-rotation continually forming and dissolving the Rub el Hizb — the endless knot, in 12 lines of CSS.
LDR-03 MOSAIC BLOOM شکوفهٔ کاشی
Nine tiles breathe in a diagonal wave (per-tile animation-delay = manhattan distance from the corner). The dome assembling itself.
09

LIVING FIELDزمینه

TECH · distance-field grid illumination

The hero background of your future sites: a star-and-cross lattice that sleeps in the dark and wakes where the cursor walks. Density, reach and ember colour are yours. (A quiet version of this is already running behind this whole page.)

FLD-01 STAR-AND-CROSS FIELD — hero background زمینهٔ زنده
شب کویر
DESERT NIGHT
Walk your cursor across it; click to send a pulse rippling through the lattice. Each tessellation edge computes its distance to the pointer and to every travelling wavefront — a distance field, rendered as lamplight on tile. Drop the export behind any hero and set your headline on top.
10

TYPE FOUNDRYقلم‌خانه

TECH · broad-nib pen glyph engine · emblem compositor · SVG/PNG export

Type a word — the foundry draws it as an original piece of lettering. No AI call, no font file: a calligraphic broad-nib pen simulation runs over letter skeletons, so every slider (weight, contrast, nib angle, flow, cascade…) is a real design decision. Deliberately fenced to three vocabularies: ancient Iranian (Persepolis wedge, Kufic geometry), Persian calligraphy (Nastaʿlīq flow), and English (serif / grotesk). Wrap it in an emblem — sunburst, mihrab, wreath, kilim — and export SVG or PNG.

FND-01 THE FOUNDRY — قلم‌خانه A–Z DISPLAY LETTERING ENGINE
Each glyph is a stroke skeleton; a virtual broad-nib pen draws it — stroke width = ƒ(segment angle − nib angle) × contrast, exactly how a reed qalam thickens and thins. FLOW < 0 snaps angles to 45° (Kufic masonry); FLOW > 0 runs Chaikin smoothing (Nastaʿlīq ink). CASCADE steps letters down the way Nastaʿlīq words descend. Everything exports as pure SVG paths — no font file, fully yours.
11

NEO UIرابط نو

TECH · conic borders · glass · magnetic ripple · CSS-var knobs

Fifteen futuristic interface parts — glassy buttons, holographic toggles, tilt cards, command bars, segmented controls, steppers, tooltips, avatars, pagination and more. Every part is skinned by CSS custom properties; COPY CODE bakes your slider values into a drop-in snippet with zero dependencies.

UI-01 AURORA GLOW BUTTON شفق
A gradient CTA lit from within — the hue is one slider, so the whole aurora (fill, glow, hairline) recolours together. Lifts and brightens on hover.
UI-02 HOLO TOGGLE کلید
An accessible switch (role + aria-checked) with a sprung knob and a glowing lit track. Click to flip. Accent colour and size are yours.
UI-03 GLASS CARD شیشه

FROSTED PANE

شیشهٔ مات

A backdrop-blur glass surface with a specular top edge and a coloured bloom behind the frost.

Real glassmorphism: backdrop-filter blur over a coloured ground, a 1px inner highlight and a soft internal glow. Tune blur and tint opacity.
UI-04 RIPPLE BUTTON موج
Material-style ink ripple that spawns exactly where you click and expands to cover the button. Pure DOM + one keyframe, no library.
UI-05 NEON SEARCH BAR جست‌وجو
⌘K
A search field that ignites its focus ring — a coloured halo plus a soft outer glow — the instant it gains focus. Focus colour is a slider.
UI-06 SEGMENTED CONTROL بخش‌بندی
A gold pill glides beneath the active label (FLIP measured), springing to each option. The iOS control, dressed in Pārsa gold.
UI-07 QUANTITY STEPPER شمارنده
1
A minus / value / plus stepper with lapis hover wash, clamped to a range. Cart quantities, settings counters, anything incremental.
UI-08 COMMAND PALETTE فرمان
New tessellation⌘N
Open foundry⌘F
Export as SVG⌘E
The ⌘K palette pattern: a search head over keyboard-navigable rows with icon chips and shortcut hints. A static, styleable shell ready for your data.
UI-09 TILT NEON CARD کاشی سه‌بعدی
MODULE // 09

HOLO PANEL

A gradient-outlined surface that tilts toward your cursor with a light bloom tracking the pointer.

A conic-masked gradient border, a cursor-tracking bloom and 3D tilt with a title floating on its own Z-plane. The premium dashboard card.
UI-10 GRADIENT BADGES نشان‌ها
A set of status pills — live, beta, pro, sold-out — each a jewel-tone gradient with a glowing status dot. Saturation is a slider; recolour the whole set at once.
UI-11 PROGRESS BAR پیشرفت
UPLOADING TILES64%
A flowing tri-colour gradient bar with an animated sheen sweep. Set the value and watch it spring; the gradient and glisten never stop moving.
UI-12 AVATAR STACK هم‌نشینان
Overlapping gradient monogram avatars that fan apart and lift on hover, ending in a "+N more" chip. Team rows, presence, collaborators.
UI-13 GLASS TOOLTIP راهنما
هنر پارسی · Persian craft, encoded
A gold-edged tooltip that springs up on hover with a caret, bilingual by default. Pure CSS — no JS, no positioning library.
UI-14 PAGINATION صفحه‌بندی
A numbered pager with prev/next arrows, ellipsis gaps and a glowing gold active page. Click any number to move the highlight.
UI-15 CHIPS INPUT برچسب‌ها
A tag-entry field: type and press Enter to pop a burgundy chip, click × to remove. Backspace on empty deletes the last. Fully working.
12

CANVAS ATELIERبوم زنده

TECH · requestAnimationFrame · flow fields · particle systems · WebGL-free math

Thirteen animated canvas backdrops driven entirely by mathematics — flow fields, constellations, wave interference, Voronoi shimmer, orbiting bodies, a harmonograph, a starfield warp, aurora, plasma, a Persian star tessellation and animated moiré. Premium hero backgrounds: each exports a self-contained paCanvas(element) you attach to any box. Live previews pause when off-screen to stay light.

13

SURFACES & FXسطوح و جلوه‌ها

TECH · animated mesh · conic borders · cursor spotlight · grain · scanlines

Twelve drop-in backdrops and overlays — animated mesh aurora, glass panels, film grain, a spinning conic border, a cursor spotlight, CRT scanlines, gradient dividers, a dot grid, an infinite marquee, a skeleton shimmer, morphing blobs and a parallax stack. Wrap any content; COPY CODE gives you the self-contained layer.

SFX-01 MESH AURORA شفق مش
MESH AURORA
Four blurred colour blobs drift and rotate behind your content — the ubiquitous "aurora gradient" hero, in carpet tones. Pure CSS, GPU-cheap.
SFX-02 GLASS ON COLOR شیشه بر رنگ
FROSTED OVER SPECTRUM
A frosted glass panel floating over a rotating conic spectrum — the definitive glassmorphism demo. Blur + saturate + inner highlight.
SFX-03 FILM GRAIN دانه فیلم
GRAIN OVERLAY
An animated fractal-noise grain (inline SVG, no image file) in overlay blend — instant analog texture over any gradient or photo. Opacity is yours.
SFX-04 CONIC BORDER حاشیهٔ چرخان
SPINNING EDGE
A rotating conic-gradient light travels the border via an @property angle — the animated "AI card" outline. Speed and border width are sliders.
SFX-05 CURSOR SPOTLIGHT نورافکن
MOVE YOUR CURSOR
A grid that stays dim except under a spotlight following your pointer, where the lines flare bright (mask + radial glow). The classic interactive hero.
SFX-06 CRT SCANLINES اسکن‌لاین
CRT · ۱۳۵۷
Retro terminal glow: fixed scanlines plus a rolling brightness sweep and phosphor text shadow. Set the line gap. Great for hacker / vintage aesthetics.
SFX-07 GRADIENT DIVIDERS جداکننده
Four section separators — a fading gold rule, a medallion-centred line, a dotted band and a conic rainbow bar. Copy the whole set; use whichever fits.
SFX-08 DOT GRID شبکهٔ نقطه
DOT GRID BACKDROP
The quintessential SaaS dotted backdrop with a soft top fade, so content floats above it. Dot colour and spacing are custom properties.
SFX-09 INFINITE MARQUEE نوار روان
PĀRSA ATELIERدست‌سازZERO IMAGESگره PĀRSA ATELIERدست‌سازZERO IMAGESگره
A seamless scrolling ticker (duplicated track + edge fade mask) that pauses on hover. Logo walls, announcements, running headlines.
SFX-10 SKELETON SHIMMER اسکلت
A loading placeholder card with a gold shimmer sweeping across every block — perceived-performance polish while real content fetches.
SFX-11 MORPHING BLOBS حباب‌های زنده
Organic blobs that endlessly morph their border-radius and drift, screen-blended into a soft lava lamp. A calm, alive backdrop with no canvas.
SFX-12 PARALLAX NIGHT پارالاکس
MOVE CURSOR · PARALLAX
Moon, stars and mountains shift at different rates as your cursor moves — depth from three layers with data-depth. Instant cinematic hero.
14

PAGE BLOCKSبلوک‌های صفحه

TECH · full composed sections · self-contained · drop-in HTML+CSS

Ten complete, production-ready page sections — a hero, a pricing table, a feature grid, testimonials, a footer, a CTA banner, a stat strip, a team grid, an FAQ accordion and a newsletter. Each preview is the real thing; COPY CODE gives you the entire section, styles inline, ready to paste into a landing page.

PAG-01 HERO BLOCK قهرمان
◈ NOW IN PUBLIC BETA

Build interfaces
worthy of the archive

میراثی برای وب

A design system distilled from Persian craft — geometry, gold and lapis, engineered for the modern web. Ship a landing page that feels centuries deep and minutes new.

A centred hero with a gradient headline, a glowing halo, a bilingual sub-line and dual CTAs. The opening statement of any Pārsa landing page.
PAG-02 PRICING TABLE تعرفه
Three tiers with a highlighted "popular" plan, feature lists with star bullets and hover lift. Everything a SaaS pricing section needs, self-contained.
PAG-03 FEATURE GRID ویژگی‌ها

Everything, encoded

Six pillars of the atelier, one system.

Girih Geometry

Every ornament is generated from equations, not clip-art — infinitely scalable.

Live Tokens

Six palettes off the loom, swappable as CSS variables in one line.

Zero Deps

No libraries, no build step. Copy a snippet, paste, ship.

Cursor Physics

Magnetic buttons and proximity ink that answer the pointer.

Bilingual

Persian and Latin type married and RTL-aware throughout.

Export Anything

SVG, PNG, CSS — every asset leaves as clean, yours-forever code.

A responsive feature grid with icon chips, hover lift and a centred header. Auto-fits from one to three columns. The workhorse "what you get" block.
PAG-04 TESTIMONIALS گواهی‌ها
Quote cards with a big serif mark, italic testimonial, gradient monogram avatar, name/role and a star rating. Social proof, dressed in gold.
PAG-05 FOOTER پاورقی
A four-column footer: brand blurb, three link columns, a bottom bar with copyright and social chips. The dependable closing of a full page.
PAG-06 CTA BANNER فراخوان

Ready to build something timeless?

همین امروز آغاز کن

Join designers shipping Persian-grade interfaces. No credit card, no lock-in — just the whole atelier.

A high-contrast call-to-action banner with a multi-stop gradient, corner glows and a single decisive button. Drop it before the footer to convert.
PAG-07 STAT STRIP آمار
86
ELEMENTS
0
DEPENDENCIES
6
LIVING PALETTES
12K+
EXPORTS SHIPPED
A metric strip: four gradient stat cards with big serif numbers and mono labels. Auto-fits across widths. Proof-in-numbers under a hero.
PAG-08 TEAM GRID تیم

The Atelier

Hands behind the loom.

A team roster of monogram-avatar cards with name, role and a Persian tagline, ringed in gold and lifting on hover. About-page ready.
PAG-09 FAQ ACCORDION پرسش‌ها

Questions & answers

A working accordion: click a question to expand its answer (height-animated), one open at a time. Gold caret rotates. Fully interactive, self-contained.
PAG-10 NEWSLETTER خبرنامه

Letters from the loom

به جمع ما بپیوند

One considered email a month — new elements, palettes and the craft behind them.

✓ WELCOME TO THE ATELIER
A newsletter capture with a star-ornament flourish, bilingual heading, focus-lit input and an inline success state on submit. Working end to end.