GENERATOR BETA
STEP 1 OF 5

Connect your GitHub.

Sign in with GitHub so we can create a repository for your site. You'll own the code forever — no lock‑in.

OR
SECURE
  • You sign in directly on GitHub’s website
  • Token stored in sessionStorage (cleared on tab close)
  • We never see your GitHub password
  • Revoke access anytime in GitHub settings
STEP 2 OF 5

Pick your Aesthetic.

Choose a ready-made animation preset, or build your own custom background effect from scratch.

STEP 3 OF 5

Add your Content.

BRAND INFO

Tell us about your business. This info appears across your site.

THEME COLORS

Pick your brand colors. These tint buttons, headings, and accents.

#6C5CE7
#0a0a0f

SEO & META TAGS

Boost search visibility. Leave these blank to auto-fill from your brand name and tagline.

INTEGRATIONS

Connect analytics and form backends. Leave blank to skip.

PAGE SECTIONS

Choose which sections to include. Hero and Contact are always on.

DESIGN OPTIONS

Optional style tweaks. Leave as Default to use the preset’s built-in look, or override any axis here. AI regeneration fills these too. Also available inside the builder → Site Design tab.

ADVANCED (designer mode)

Fine-tune the axes that don’t have simple dropdowns — per-section tones/animations, card counts, nav CTA, footer recipe. Everything auto-populates from the last AI run.

✎ SECTION TONES & ANIMATIONS

Per-section background tone + entrance animation. Section must be enabled in the SECTIONS list above.

✎ CARD COUNTS

How many cards render in each list section (clamped to available copy).

✎ NAV CTA

Extra link or button next to the navigation (right-hand side).

✎ FOOTER RECIPE

Multi-column footer. One column per row, heading first, then one item per line. Leave empty for the minimal footer.

⚙ DESIGN JSON (raw)

Power users: edit every axis directly including elementOverrides and designTokens. Unknown keys are ignored. Buttons below apply to the preview.

CONTENT

Edit the content for each section. Defaults are pre-filled based on your industry.

Hero

Services

Portfolio

About

Contact

My Site
100%
TEMPLATES

Choose a starting point, then customize

PAGES

Click a page to preview it. Use ⚙ to edit sections, SEO & custom blocks.

SITE DESIGN

Every style axis the AI can set — editable by hand. Changes here instantly update the preview.

Click an element
MENU BACKGROUND
Overlay Color
LINK
FONT
Size
Weight
Line Height
Letter Space
ALIGNMENT
COLORS
Text
Background
BACKGROUND
SPACING
Top
Right
Bottom
Left
BORDER
Width
Style
Color
BORDER RADIUS
0px
TRANSFORM
Rotate 0°
OPACITY
100%
LAYER ORDER (Z-INDEX)
BACKDROP FILTER
BOX SHADOW
ENTRANCE ANIMATION
CONTINUOUS ANIMATION
HOVER EFFECT
SCROLL BEHAVIOR
TIMING
Duration
Delay
BACKGROUND EFFECT
Intensity 50%
Effect Colors
PARTICLE BUILDER
Type
Count: 50
Size: 4
Speed: 1
Glow: 5
VIDEO SCROLL LAYER

Scroll-driven video effect

Drop video or click MP4, WebM — max 30s
IMAGE SEQUENCE
Drop frame images PNG/JPG, named in order
PRESETS
FPS: 24
Speed: 1x
No selection arbel.live builder
My Site
100%
PAGES
SCENES
ELEMENTS
Select an element
TEXT
ADVANCED
Blend Mode
Cursor
POSITION
Top
Left
Right
Bottom
Width
Height
FONT
Family
Size
Weight
Line Height
Spacing
Align
TEXT COLOR
Text
ELEMENT BACKGROUND
Color
APPEARANCE
Opacity 100%
Border Radius 0px
Z-Index
EFFECTS
Box Shadow
Backdrop
3D TRANSFORM
Rotate X
Rotate Y
Rotate Z
Translate Z
Perspective
Backface
3D Preset
BORDER
Width
Style
Color
ALIGNMENT
PADDING
Top
Right
Bottom
Left
HOVER STATE

Style changes on mouse hover. Pick a preset or customize.

Preset
Opacity
Scale
Text Color
Background
Y Offset
Rotate
Shadow
Duration
Blur (px)
Brightness
Saturate
Letter Spacing
X Offset
Skew X (deg)
Scroll Animation
ANIMATION PRESET
Scene Settings
PIN
DURATION
Scroll length (%)
SCENE TRANSITION
On enter
SCENE BACKGROUND
Color
VIDEO SCROLL LAYER

Full-viewport scroll-linked video background that scrubs with page scroll.

Video Preset
3D BACKGROUND EFFECT
Effect Type
SPLINE 3D EMBED
Spline Scene URL
NAVIGATION
CUSTOM CODE

Inject custom HTML, CSS, or tracking scripts into the compiled output.

Head Injection (analytics, meta, scripts)
Custom CSS
Body End (scripts before </body>)
Hover Reveal Layers

Stack images & videos that reveal on hover with cursor-driven mask effects. Drag layers to reorder.

Drop images or videos here Images <5MB · Videos <15MB · MP4, WebM, PNG, JPG, WebP
Upload a layer to reveal on hover
over the scene background
Design Tokens

Global styles applied across all scenes via CSS custom properties.

TYPOGRAPHY
Heading Font
Body Font
Base Size px
Scale Ratio
COLORS
Primary
Secondary
Text
Text Muted
Background
Surface
SPACING & SHAPE
Space Unit px
Radius px
STEP 5 OF 5

Publish your Site.

username /

Lowercase letters and hyphens only. This becomes your site URL.

🌐 Your site will be live at: username.github.io/my-portfolio