# Hero · Drape React 网页组件 | Creght Blocks

> 窗光照在垂坠的布料上，切换面料时褶皱、光泽和颜色随之变化，适合床品品牌。

[Blocks](/zh-CN.md) [Sections](/zh-CN.md#section-library) [Templates](/zh-CN/templates.md) [Hero StudioNew](/zh-CN/hero-studio.md)

[Templates](/zh-CN/templates.md) [Hero Studio](/zh-CN/hero-studio.md)

[EN](/blocks/hero-drape.md) [中文](/zh-CN/blocks/hero-drape.md)

[全部组件](/zh-CN.md)/Hero · Drape

首屏免费

Creght Blocks 组件

# Hero · Drape

窗光照在垂坠的布料上，切换面料时褶皱、光泽和颜色随之变化，适合床品品牌。

[完整预览](/zh-CN/preview.md?section=hero-drape)

在 Creght 中使用

## 实时预览

切换桌面、平板和手机宽度，检查组件的响应式效果。

桌面平板手机

组件介绍

## 可直接用于生产项目的页面板块

窗光照在垂坠的布料上，切换面料时褶皱、光泽和颜色随之变化，适合床品品牌。

### 如何使用

1. 01
确认适用场景

通过组件说明和技术信息，判断它是否适合当前页面。

2. 02
检查页面效果

切换不同设备宽度，并打开完整预览体验真实交互。

3. 03
用于实际项目

前往 Creght，根据品牌、内容和转化目标继续调整组件。


技术信息

分类首屏

运行开销适中

渲染方式客户端动画

依赖无

## 相关组件

继续浏览同一分类下的其他组件。

[![Hero · Sunlit](https://fsu.creght.com/site/2083536173505974272/1794213809597__creght_blocks_hero_sunlit_cover_v2.webp?w=3072&fmt=webp)](/zh-CN/blocks/hero-sunlit.md)

### [Hero · Sunlit](/zh-CN/blocks/hero-sunlit.md)

午后阳光穿过窗格落在墙上，点选植物时墙上的叶影随之更换，适合植物店。

[![Hero · Sunlit Hours](https://fsu.creght.com/site/2083536173505974272/1793192348458__creght_blocks_hero_sunlit_hours_cover.webp?w=3072&fmt=webp)](/zh-CN/blocks/hero-sunlit-hours.md)

### [Hero · Sunlit Hours](/zh-CN/blocks/hero-sunlit-hours.md)

一整天里移动、变色的窗光，拖动 7am–7pm 时间轴或自动播放，适合房屋租赁。

[![Hero · Caustics](https://fsu.creght.com/site/2083536173505974272/1793176614342__creght_blocks_hero_caustics_cover.webp?w=3072&fmt=webp)](/zh-CN/blocks/hero-caustics.md)

### [Hero · Caustics](/zh-CN/blocks/hero-caustics.md)

水面折射到池底的焦散光纹，切换目的地时水色过渡并荡开涟漪，适合泳池酒店。

> 全站页面清单：[/llms.txt](/llms.txt)