Design Vocabulary

When prompting Skappa's AI, using the right design terminology gets dramatically better results. Instead of saying "make it look cool," say "add parallax scrolling with a bento grid layout and glassmorphism cards." This guide covers every visual design pattern name you can use.

Scroll Effects

• Parallax — Background moves slower than foreground as you scroll, creating a sense of depth
• Scrollytelling — Content reveals and animates as you scroll through a narrative sequence
• Sticky Scroll — An element stays pinned in place while surrounding content scrolls past it
• Scroll Snap — Page "snaps" to specific sections — each scroll gesture lands on a full section
• Scroll Reveal / Fade In — Elements fade or slide into view as you scroll down to them
• Horizontal Scroll — Content scrolls sideways instead of vertically, often used for galleries
• Infinite Scroll — New content loads automatically as you reach the bottom of the page
• Smooth Scroll — Buttery, momentum-based scrolling instead of the default browser behavior

Layout Patterns

• Bento Grid — Asymmetric grid with varying card sizes, like Apple's marketing pages
• Masonry — Pinterest-style layout where items fill vertical space without fixed row heights
• Split Screen — Page divided into two equal halves (image + text, or two sections side by side)
• Hero Section — Full-width top section with a big headline, subtext, and call-to-action button
• Dashboard Layout — Header + sidebar + content area with stat cards, charts, and tables
• Magazine Layout — Mixed column widths like a print magazine spread
• Broken Grid — Elements intentionally break out of alignment for visual interest
• Card Grid — Uniform grid of equal-sized cards, responsive across breakpoints

Background Effects

• Glassmorphism — Frosted glass effect with a blurred transparent background and subtle border
• Neumorphism — Soft, extruded look using inner and outer shadows (looks like pressed clay)
• Aurora / Northern Lights — Animated flowing color gradients in the background
• Gradient Mesh — Blurred, multi-color gradient blobs (common in modern SaaS designs)
• Particle Field — Floating dots or shapes that move gently or react to your cursor
• Noise / Grain — Subtle texture overlay for a film or analog feel
• Dot Grid — Repeating dots or lines as a subtle background pattern
• Bokeh — Blurred circles of light in the background, like out-of-focus camera lights

Hover & Interaction Effects

• Card Lift — Card raises up with a larger shadow when you hover over it
• Hover Glow — A subtle color glow appears behind the element on hover
• 3D Tilt — Element tilts toward your cursor in 3D space as you move over it
• Ripple Effect — A circular wave expands from where you click (Material Design style)
• Magnetic Cursor — Element subtly follows or attracts toward your cursor
• Spotlight — Area around your cursor is illuminated while the rest is dimmed
• Hover Reveal — Hidden content (overlay, description) appears when you hover

Entrance Animations

• Fade In / Fade Up — Element gradually appears, optionally sliding upward
• Scale In / Pop In — Element starts small and scales to full size with a spring effect
• Stagger — Multiple elements animate in sequence with small delays (cards appearing one by one)
• Cascade — Like stagger but with a waterfall or wave pattern
• Typewriter — Text appears character by character
• Counter / Count Up — A number animates from 0 to its final value
• Draw / Stroke — An SVG path draws itself progressively
• Blur In — Element starts blurry and sharpens into focus

Text Effects

• Gradient Text — Text filled with a color gradient instead of a solid color
• Marquee / Ticker — Text scrolls horizontally in a continuous loop
• Text Scramble — Random characters cycle before settling on the final text
• Highlight Draw — A marker-style highlight draws across text
• Glitch Text — Text distorts and shifts with a digital glitch effect

Page Transitions

• Crossfade — Old content fades out while new content fades in simultaneously
• Slide Transition — New page slides in from a direction while old page slides out
• Morph / Shared Element — An element visually transforms from one position to another across pages
• Zoom Transition — Element scales up to fill the screen or scales down to reveal next view

How to Use These in Prompts

Combine these terms naturally in your prompts. The more specific you are, the better the result:

"Build a SaaS landing page with a hero section using glassmorphism cards,
parallax scrolling between sections, staggered fade-in animations for
the feature grid, a bento grid layout for the testimonials, and gradient
text on the main headline."

You can also reference these effects when using Fix mode: "Add a card lift hover effect to the product cards" or "Make the stats counter animate when scrolled into view."