# Hero Studio · Design and export a Hero section | Creght Blocks

> Combine layouts and animated backgrounds, edit content, preview on desktop and mobile, and export React code.

[Back to library](/)

# Hero StudioBETA

[EN](/hero-studio.md) [中文](/zh-CN/hero-studio.md)Draft saved in this browserResetPreviewExport code

01 / LAYOUT

## Choose a layout

Choose the foreground structure first. Your content and background stay in place.

AI input03Mockup02

A little idea. A world of possibility.

# Your next big thing starts with an idea.

A creative workspace for turning what you imagine into what comes next. Dream it. Describe it. Make it real.

Describe what you want to create…

Bring your ideas to life

A portfolio websiteA new brand identityMy next big idea

Start with an idea. Make it something real.

**Centered input** Put your idea in focus

A little idea. A world of possibility.

# Your next big thing starts with an idea.

A creative workspace for turning what you imagine into what comes next. Dream it. Describe it. Make it real.

[Start creating](#start)

Your creative co-pilot

Describe what you want to create…

Bring your ideas to life

A portfolio websiteA new brand identityMy next big idea

Start with an idea. Make it something real.

**Text and input** Introduce your product and invite creation

![](https://fsu.creght.com/site/2083536173505974272/1790430741908__hero_sphere_ai_creghtai.png?w=3072&fmt=webp)

**CreghtAI** Navigation, title, and input from the reference

One idea, many expressions.

Switching layouts keeps your content.

Live previewCentered input

DesktopMobile

your-next-idea.com

Preparing canvas…

AI input/Cunda Rays·Dark1200 × 860·75%

MAKE IT YOURSChoose layout→Change background→Adjust settings→Export code

BackgroundContent

## Set the mood with a background

Choose an appearance, then a background and its details.

DarkLight

Dark backgrounds with light text emphasize depth and light.

![](https://fsu.creght.com/site/2083536173505974272/1790153799366__cunda_hero_background_cover.png?w=3072&fmt=webp)
Cunda Rays
![](https://fsu.creght.com/site/2083536173505974272/1788402652071__background_ai_liquid_cover.png?w=3072&fmt=webp)
AI Liquid
![](/covers/cargo-liquid.svg)
Cargo liquid gradient
![](https://fsu.creght.com/site/2083536173505974272/1790430741908__hero_sphere_ai_creghtai.png?w=3072&fmt=webp)
Arc Flow
![](https://fsu.creght.com/site/2083536173505974272/1788336621574__background_neuro_noise_cover.png?w=3072&fmt=webp)
Neuro Noise

**Cunda Rays** Flowing light rays

Applied

Effect settingsReset settings

Ray color A#EAB308Ray color B#0079FFMotion speed4.0Light intensity3.0Ray spread3.0Light positionTop rightTop leftBottom rightBottom leftTilt-3Grid opacity0.25

More settings

Color blend0.65Saturation2.0Light falloff1.5Ray opacity1.00

Content readability

Dark overlay0.24

Dim the background so light text stays clear.

Settings are saved separately for each background

TAKE IT WITH YOU

## Your Hero is ready.

One TSX file contains the selected layout, background source, and settings.

React + Tailwind CSS v4 `npm install lucide-react ogl`

GeneratedHero.tsxSave the file, then import <GeneratedHero />

Download TSXCopy code

> Full page index: [/llms.txt](/llms.txt)