效果
纹理遮罩文字
使用纹理 PNG 遮罩为文字添加材质效果
text texture mask effect
砖块
BRICK
岩石
ROCK
地面 103
GROUND
木材
WOOD
金属
METAL
熔岩
LAVA
安装
npx hyperframes add texture-mask-text
详情
| 属性 | 值 |
|---|---|
| 类型 | 组件 |
智能体使用方法
在请求智能体应用纹理时，使用以下措辞：
Use the Texture Mask Text catalog component.
1. From the project root, run:
npx hyperframes add texture-mask-text
2. That command creates this installed snippet:
compositions/components/texture-mask-text/texture-mask-text.html
3. Open that file and paste the real <style> block
near the bottom into the composition once. That CSS defines
hf-texture-text and every hf-texture-* class.
4. Apply this class to the target text:
class="hf-texture-text hf-texture-brick"
5. For another material, copy one hf-texture-* class
from the Texture Examples cards.
6. This is the proper way to apply drop shadow
o textured text: wrap the text and put
filter on the wrapper, not on the text.
Use this markup:
<div style="filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.48))">
<div class="hf-texture-text hf-texture-brick">TEXT</div>
</div>
安装后，代码片段位于你运行 npx hyperframes add texture-mask-text 的项目中的 compositions/components/texture-mask-text/texture-mask-text.html。需要粘贴的部分是该文件底部附近的真正 <style> 元素；纹理 PNG 文件安装到 assets/texture-mask-text/masks/ 目录中，CSS 中通过项目根目录的 URL 引用它们。
将 hf-texture-brick 替换为下方任意纹理卡片上显示的类名。基础类 hf-texture-text 始终是必需的。
动画纹理
通过在文字元素上移动遮罩位置来为纹理添加动画。将 drop-shadow 保留在包裹器上，使阴影跟随纹理轮廓。
MOTION
<div class="texture-shadow">
<div class="hf-texture-text hf-texture-lava animated-texture">MOTION</div>
</div>
.animated-texture {
--mask-size: 180% 180%;
--mask-position: 0% 50%;
}
const tl = gsap.timeline({ paused: true });
l.to(".animated-texture", {
"--mask-position": "100% 50%",
duration: 1.2,
ease: "sine.inOut",
yoyo: true,
repeat: 1,
}, 0);
window.__timelines["my-composition"] = tl;
纹理示例
砌体
BRICK
使用
hf-texture-text hf-texture-brickBRICK
使用
hf-texture-text hf-texture-bricks-104BRICK
使用
hf-texture-text hf-texture-bricks-102BRICK
使用
hf-texture-text hf-texture-bricks-101BRICK
使用
hf-texture-text hf-texture-bricks-075-aCONCRETE
使用
hf-texture-text hf-texture-concreteCONCRETE
使用
hf-texture-text hf-texture-concrete-034CONCRETE
使用
hf-texture-text hf-texture-concrete-047-aCONCRETE
使用
hf-texture-text hf-texture-concrete-046CONCRETE
使用
hf-texture-text hf-texture-concrete-042-aPLASTER
使用
hf-texture-text hf-texture-plaster-001PLASTER
使用
hf-texture-text hf-texture-painted-plaster-017石材
ROCK
使用
hf-texture-text hf-texture-rockROCK
使用
hf-texture-text hf-texture-rock-063ROCK
使用
hf-texture-text hf-texture-rock-058ONYX
使用
hf-texture-text hf-texture-onyxMARBLE
使用
hf-texture-text hf-texture-marble-012MARBLE
使用
hf-texture-text hf-texture-marble-016STONE
使用
hf-texture-text hf-texture-travertine-009STONE
使用
hf-texture-text hf-texture-paving-stones-150STONE
使用
hf-texture-text hf-texture-paving-stones-138TILE
使用
hf-texture-text hf-texture-tiles-138地面 / 道路
GROUND
使用
hf-texture-text hf-texture-ground-103GROUND
使用
hf-texture-text hf-texture-ground-037GROUND
使用
hf-texture-text hf-texture-ground-054GROUND
使用
hf-texture-text hf-texture-ground-104GROUND
使用
hf-texture-text hf-texture-ground-068GROUND
使用
hf-texture-text hf-texture-ground-080ROAD
使用
hf-texture-text hf-texture-road-012-aROAD
使用
hf-texture-text hf-texture-road-008-aROAD
使用
hf-texture-text hf-texture-road-007ROAD
使用
hf-texture-text hf-texture-road-013-aROAD
使用
hf-texture-text hf-texture-road-012-bROAD
使用
hf-texture-text hf-texture-road-009-cASPHALT
使用
hf-texture-text hf-texture-asphalt-031木材
WOOD
使用
hf-texture-text hf-texture-woodWOOD
使用
hf-texture-text hf-texture-wood-094WOOD
使用
hf-texture-text hf-texture-wood-092WOOD
使用
hf-texture-text hf-texture-wood-051WOOD
使用
hf-texture-text hf-texture-wood-066WOOD
使用
hf-texture-text hf-texture-wood-049WOOD
使用
hf-texture-text hf-texture-wood-058FLOOR
使用
hf-texture-text hf-texture-wood-floor-051FLOOR
使用
hf-texture-text hf-texture-wood-floor-064FLOOR
使用
hf-texture-text hf-texture-wood-floor-070BARK
使用
hf-texture-text hf-texture-bark-014金属
METAL
使用
hf-texture-text hf-texture-metalMETAL
使用
hf-texture-text hf-texture-metal-049-aMETAL
使用
hf-texture-text hf-texture-metal-055-aMETAL
使用
hf-texture-text hf-texture-metal-046-bMETAL
使用
hf-texture-text hf-texture-metal-061-bMETAL
使用
hf-texture-text hf-texture-metal-048-aMETAL
使用
hf-texture-text hf-texture-metal-032METAL
使用
hf-texture-text hf-texture-metal-041-aMETAL
使用
hf-texture-text hf-texture-metal-038PLATE
使用
hf-texture-text hf-texture-diamond-plate-009有机 / 柔软
LAVA
使用
hf-texture-text hf-texture-lavaGRASS
使用
hf-texture-text hf-texture-grass-005GRASS
使用
hf-texture-text hf-texture-grass-001GRASS
使用
hf-texture-text hf-texture-grass-004WOVEN
使用
hf-texture-text hf-texture-carpetFABRIC
使用
hf-texture-text hf-texture-fabric-083SNOW
使用
hf-texture-text hf-texture-snowSNOW
使用
hf-texture-text hf-texture-snow-015LEATHER
使用
hf-texture-text hf-texture-leather-037FABRIC
使用
hf-texture-text hf-texture-fabric-080使用方法
运行 npx hyperframes add texture-mask-text 后，安装的代码片段位于你当前 HyperFrames 项目中的 compositions/components/texture-mask-text/texture-mask-text.html。打开该文件并将底部附近真正的 <style> 元素粘贴到你的 composition 中一次；它定义了 hf-texture-text 以及上方示例中使用的所有 hf-texture-* 类。将安装的纹理 PNG 文件保留在 assets/texture-mask-text/masks/ 目录中；CSS 通过项目根目录的 URL 引用它们。