chore: import upstream snapshot with attribution
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
This commit is contained in:
wehub-resource-sync
+286
@@ -0,0 +1,286 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Texture Mask Text - Demo</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="demo"
|
||||
data-composition-id="texture-mask-text-demo"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="5"
|
||||
data-start="0"
|
||||
>
|
||||
<div class="demo-canvas">
|
||||
<div class="header">
|
||||
<div class="title">Texture Mask Text</div>
|
||||
<div class="count">66 ambientCG luminance masks</div>
|
||||
</div>
|
||||
<div class="groups" id="texture-groups"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#demo {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
font-family:
|
||||
Arial Black,
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.hf-texture-text {
|
||||
color: #fff;
|
||||
-webkit-mask-size: var(--mask-size, cover);
|
||||
mask-size: var(--mask-size, cover);
|
||||
-webkit-mask-position: var(--mask-position, center);
|
||||
mask-position: var(--mask-position, center);
|
||||
-webkit-mask-mode: luminance;
|
||||
mask-mode: luminance;
|
||||
filter: contrast(var(--mask-contrast, 1));
|
||||
}
|
||||
|
||||
.demo-canvas {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #111;
|
||||
padding: 42px 44px 38px;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 84px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.groups {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 22px 24px;
|
||||
width: 1832px;
|
||||
height: 898px;
|
||||
}
|
||||
|
||||
.group-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
}
|
||||
|
||||
.group-count {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.52);
|
||||
}
|
||||
|
||||
.group-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px 10px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
min-width: 0;
|
||||
height: 66px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.shadow-wrap {
|
||||
width: 100%;
|
||||
filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.46));
|
||||
}
|
||||
|
||||
.sample {
|
||||
width: 100%;
|
||||
font-family:
|
||||
Impact,
|
||||
Arial Black,
|
||||
Arial,
|
||||
sans-serif;
|
||||
font-size: 31px;
|
||||
line-height: 0.9;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const textureMaskTextGroups = [
|
||||
[
|
||||
"Masonry",
|
||||
"brick|Brick|MORTAR,bricks-104|Bricks 104|BRICK,bricks-102|Bricks 102|BRICK,bricks-101|Bricks 101|BRICK,bricks-075-a|Bricks 075 A|BRICK,concrete|Concrete|SCORED,concrete-034|Concrete 034|CONCRETE,concrete-047-a|Concrete 047 A|CONCRETE,concrete-046|Concrete 046|CONCRETE,concrete-042-a|Concrete 042 A|CONCRETE,plaster-001|Plaster 001|PLASTER,painted-plaster-017|Painted Plaster 017|PLASTER",
|
||||
],
|
||||
[
|
||||
"Stone",
|
||||
"rock|Rock|RUINED,rock-063|Rock 063|ROCK,rock-058|Rock 058|ROCK,onyx|Onyx|VEINED,marble-012|Marble 012|MARBLE,marble-016|Marble 016|MARBLE,travertine-009|Travertine 009|STONE,paving-stones-150|Paving Stones 150|STONE,paving-stones-138|Paving Stones 138|STONE,tiles-138|Tiles 138|TILE",
|
||||
],
|
||||
[
|
||||
"Ground / Road",
|
||||
"ground-103|Ground 103|GROUND,ground-037|Ground 037|GROUND,ground-054|Ground 054|GROUND,ground-104|Ground 104|GROUND,ground-068|Ground 068|GROUND,ground-080|Ground 080|GROUND,road-012-a|Road 012 A|ROAD,road-008-a|Road 008 A|ROAD,road-007|Road 007|ROAD,road-013-a|Road 013 A|ROAD,road-012-b|Road 012 B|ROAD,road-009-c|Road 009 C|ROAD,asphalt-031|Asphalt 031|ASPHALT",
|
||||
],
|
||||
[
|
||||
"Wood",
|
||||
"wood|Wood|SLICED,wood-094|Wood 094|WOOD,wood-092|Wood 092|WOOD,wood-051|Wood 051|WOOD,wood-066|Wood 066|WOOD,wood-049|Wood 049|WOOD,wood-058|Wood 058|WOOD,wood-floor-051|Wood Floor 051|FLOOR,wood-floor-064|Wood Floor 064|FLOOR,wood-floor-070|Wood Floor 070|FLOOR,bark-014|Bark 014|BARK",
|
||||
],
|
||||
[
|
||||
"Metal",
|
||||
"metal|Metal|FADING,metal-049-a|Metal 049 A|METAL,metal-055-a|Metal 055 A|METAL,metal-046-b|Metal 046 B|METAL,metal-061-b|Metal 061 B|METAL,metal-048-a|Metal 048 A|METAL,metal-032|Metal 032|METAL,metal-041-a|Metal 041 A|METAL,metal-038|Metal 038|METAL,diamond-plate-009|Diamond Plate 009|PLATE",
|
||||
],
|
||||
[
|
||||
"Organic / Soft",
|
||||
"lava|Lava|MOLTEN,grass-005|Grass 005|GRASS,grass-001|Grass 001|GRASS,grass-004|Grass 004|GRASS,carpet|Carpet|WOVEN,fabric-083|Fabric 083|FABRIC,snow|Snow|THAW,snow-015|Snow 015|SNOW,leather-037|Leather 037|LEATHER,fabric-080|Fabric 080|FABRIC",
|
||||
],
|
||||
];
|
||||
const textureGroups = document.getElementById("texture-groups");
|
||||
for (const [groupName, rows] of textureMaskTextGroups) {
|
||||
const items = rows.split(",").map((row) => {
|
||||
const [slug, title, sample] = row.split("|");
|
||||
return { slug, title, sample };
|
||||
});
|
||||
const panel = document.createElement("section");
|
||||
panel.className = "group-panel";
|
||||
|
||||
const groupHeader = document.createElement("div");
|
||||
groupHeader.className = "group-header";
|
||||
|
||||
const name = document.createElement("div");
|
||||
name.className = "group-name";
|
||||
name.textContent = groupName;
|
||||
|
||||
const count = document.createElement("div");
|
||||
count.className = "group-count";
|
||||
count.textContent = `${items.length} masks`;
|
||||
|
||||
groupHeader.append(name, count);
|
||||
|
||||
const groupGrid = document.createElement("div");
|
||||
groupGrid.className = "group-grid";
|
||||
|
||||
for (const item of items) {
|
||||
const cell = document.createElement("div");
|
||||
cell.className = "cell";
|
||||
|
||||
const label = document.createElement("div");
|
||||
label.className = "label";
|
||||
label.textContent = item.title;
|
||||
|
||||
const shadowWrap = document.createElement("div");
|
||||
shadowWrap.className = "shadow-wrap";
|
||||
|
||||
const sample = document.createElement("div");
|
||||
sample.className = "hf-texture-text sample";
|
||||
sample.style.webkitMaskImage = `url("masks/${item.slug}.png")`;
|
||||
sample.style.maskImage = `url("masks/${item.slug}.png")`;
|
||||
sample.textContent = item.sample;
|
||||
|
||||
shadowWrap.appendChild(sample);
|
||||
cell.append(label, shadowWrap);
|
||||
groupGrid.appendChild(cell);
|
||||
}
|
||||
|
||||
panel.append(groupHeader, groupGrid);
|
||||
textureGroups.appendChild(panel);
|
||||
}
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
const textureMaskTextTimeline = {
|
||||
play() {},
|
||||
pause() {},
|
||||
seek() {},
|
||||
time() {
|
||||
return 0;
|
||||
},
|
||||
duration() {
|
||||
return 5;
|
||||
},
|
||||
add() {},
|
||||
paused() {},
|
||||
set() {},
|
||||
};
|
||||
window.__timelines["texture-mask-text-demo"] = textureMaskTextTimeline;
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,446 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "texture-mask-text",
|
||||
"type": "hyperframes:component",
|
||||
"title": "Texture Mask Text",
|
||||
"description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
|
||||
"tags": ["text", "text-effect", "effect", "texture", "mask"],
|
||||
"textureGroups": [
|
||||
{
|
||||
"title": "Masonry",
|
||||
"items": [
|
||||
"brick",
|
||||
"bricks-104",
|
||||
"bricks-102",
|
||||
"bricks-101",
|
||||
"bricks-075-a",
|
||||
"concrete",
|
||||
"concrete-034",
|
||||
"concrete-047-a",
|
||||
"concrete-046",
|
||||
"concrete-042-a",
|
||||
"plaster-001",
|
||||
"painted-plaster-017"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Stone",
|
||||
"items": [
|
||||
"rock",
|
||||
"rock-063",
|
||||
"rock-058",
|
||||
"onyx",
|
||||
"marble-012",
|
||||
"marble-016",
|
||||
"travertine-009",
|
||||
"paving-stones-150",
|
||||
"paving-stones-138",
|
||||
"tiles-138"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Ground / Road",
|
||||
"items": [
|
||||
"ground-103",
|
||||
"ground-037",
|
||||
"ground-054",
|
||||
"ground-104",
|
||||
"ground-068",
|
||||
"ground-080",
|
||||
"road-012-a",
|
||||
"road-008-a",
|
||||
"road-007",
|
||||
"road-013-a",
|
||||
"road-012-b",
|
||||
"road-009-c",
|
||||
"asphalt-031"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Wood",
|
||||
"items": [
|
||||
"wood",
|
||||
"wood-094",
|
||||
"wood-092",
|
||||
"wood-051",
|
||||
"wood-066",
|
||||
"wood-049",
|
||||
"wood-058",
|
||||
"wood-floor-051",
|
||||
"wood-floor-064",
|
||||
"wood-floor-070",
|
||||
"bark-014"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Metal",
|
||||
"items": [
|
||||
"metal",
|
||||
"metal-049-a",
|
||||
"metal-055-a",
|
||||
"metal-046-b",
|
||||
"metal-061-b",
|
||||
"metal-048-a",
|
||||
"metal-032",
|
||||
"metal-041-a",
|
||||
"metal-038",
|
||||
"diamond-plate-009"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Organic / Soft",
|
||||
"items": [
|
||||
"lava",
|
||||
"grass-005",
|
||||
"grass-001",
|
||||
"grass-004",
|
||||
"carpet",
|
||||
"fabric-083",
|
||||
"snow",
|
||||
"snow-015",
|
||||
"leather-037",
|
||||
"fabric-080"
|
||||
]
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "texture-mask-text.html",
|
||||
"target": "compositions/components/texture-mask-text/texture-mask-text.html",
|
||||
"type": "hyperframes:snippet"
|
||||
},
|
||||
{
|
||||
"path": "masks/lava.png",
|
||||
"target": "assets/texture-mask-text/masks/lava.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/rock.png",
|
||||
"target": "assets/texture-mask-text/masks/rock.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/concrete.png",
|
||||
"target": "assets/texture-mask-text/masks/concrete.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/brick.png",
|
||||
"target": "assets/texture-mask-text/masks/brick.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood.png",
|
||||
"target": "assets/texture-mask-text/masks/wood.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/onyx.png",
|
||||
"target": "assets/texture-mask-text/masks/onyx.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/carpet.png",
|
||||
"target": "assets/texture-mask-text/masks/carpet.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal.png",
|
||||
"target": "assets/texture-mask-text/masks/metal.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/snow.png",
|
||||
"target": "assets/texture-mask-text/masks/snow.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/bricks-104.png",
|
||||
"target": "assets/texture-mask-text/masks/bricks-104.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/ground-103.png",
|
||||
"target": "assets/texture-mask-text/masks/ground-103.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/grass-005.png",
|
||||
"target": "assets/texture-mask-text/masks/grass-005.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/rock-063.png",
|
||||
"target": "assets/texture-mask-text/masks/rock-063.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-094.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-094.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/road-012-a.png",
|
||||
"target": "assets/texture-mask-text/masks/road-012-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-092.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-092.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-049-a.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-049-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-floor-051.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-floor-051.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/paving-stones-150.png",
|
||||
"target": "assets/texture-mask-text/masks/paving-stones-150.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/road-008-a.png",
|
||||
"target": "assets/texture-mask-text/masks/road-008-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/road-007.png",
|
||||
"target": "assets/texture-mask-text/masks/road-007.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-055-a.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-055-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/concrete-034.png",
|
||||
"target": "assets/texture-mask-text/masks/concrete-034.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/grass-001.png",
|
||||
"target": "assets/texture-mask-text/masks/grass-001.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-051.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-051.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/asphalt-031.png",
|
||||
"target": "assets/texture-mask-text/masks/asphalt-031.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-floor-064.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-floor-064.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/concrete-047-a.png",
|
||||
"target": "assets/texture-mask-text/masks/concrete-047-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-046-b.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-046-b.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/grass-004.png",
|
||||
"target": "assets/texture-mask-text/masks/grass-004.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/marble-012.png",
|
||||
"target": "assets/texture-mask-text/masks/marble-012.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/ground-037.png",
|
||||
"target": "assets/texture-mask-text/masks/ground-037.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/tiles-138.png",
|
||||
"target": "assets/texture-mask-text/masks/tiles-138.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-066.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-066.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/concrete-046.png",
|
||||
"target": "assets/texture-mask-text/masks/concrete-046.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-049.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-049.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/road-013-a.png",
|
||||
"target": "assets/texture-mask-text/masks/road-013-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/plaster-001.png",
|
||||
"target": "assets/texture-mask-text/masks/plaster-001.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/snow-015.png",
|
||||
"target": "assets/texture-mask-text/masks/snow-015.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/road-012-b.png",
|
||||
"target": "assets/texture-mask-text/masks/road-012-b.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/concrete-042-a.png",
|
||||
"target": "assets/texture-mask-text/masks/concrete-042-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/bricks-102.png",
|
||||
"target": "assets/texture-mask-text/masks/bricks-102.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/rock-058.png",
|
||||
"target": "assets/texture-mask-text/masks/rock-058.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-floor-070.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-floor-070.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/bricks-101.png",
|
||||
"target": "assets/texture-mask-text/masks/bricks-101.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/travertine-009.png",
|
||||
"target": "assets/texture-mask-text/masks/travertine-009.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/ground-054.png",
|
||||
"target": "assets/texture-mask-text/masks/ground-054.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/wood-058.png",
|
||||
"target": "assets/texture-mask-text/masks/wood-058.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/ground-104.png",
|
||||
"target": "assets/texture-mask-text/masks/ground-104.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/painted-plaster-017.png",
|
||||
"target": "assets/texture-mask-text/masks/painted-plaster-017.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/paving-stones-138.png",
|
||||
"target": "assets/texture-mask-text/masks/paving-stones-138.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/ground-068.png",
|
||||
"target": "assets/texture-mask-text/masks/ground-068.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/bricks-075-a.png",
|
||||
"target": "assets/texture-mask-text/masks/bricks-075-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/ground-080.png",
|
||||
"target": "assets/texture-mask-text/masks/ground-080.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/road-009-c.png",
|
||||
"target": "assets/texture-mask-text/masks/road-009-c.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/bark-014.png",
|
||||
"target": "assets/texture-mask-text/masks/bark-014.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/marble-016.png",
|
||||
"target": "assets/texture-mask-text/masks/marble-016.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/fabric-083.png",
|
||||
"target": "assets/texture-mask-text/masks/fabric-083.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-061-b.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-061-b.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-048-a.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-048-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-032.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-032.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-041-a.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-041-a.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/metal-038.png",
|
||||
"target": "assets/texture-mask-text/masks/metal-038.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/diamond-plate-009.png",
|
||||
"target": "assets/texture-mask-text/masks/diamond-plate-009.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/leather-037.png",
|
||||
"target": "assets/texture-mask-text/masks/leather-037.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "masks/fabric-080.png",
|
||||
"target": "assets/texture-mask-text/masks/fabric-080.png",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
],
|
||||
"preview": {
|
||||
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,379 @@
|
||||
<!--
|
||||
Texture Mask Text - CSS luminance masks that cut holes through letterforms.
|
||||
|
||||
Usage: add class="hf-texture-text hf-texture-{name}" to any text element.
|
||||
Paste the real style element near the bottom of this file into your composition's HTML once.
|
||||
Texture PNGs install to assets/texture-mask-text/masks; these CSS classes
|
||||
reference them with project-root URLs so the CSS block can be pasted
|
||||
into any composition.
|
||||
|
||||
Available textures (66 total):
|
||||
Masonry:
|
||||
hf-texture-brick - mortar line patterns
|
||||
hf-texture-bricks-104 - ambientCG Bricks104
|
||||
hf-texture-bricks-102 - ambientCG Bricks102
|
||||
hf-texture-bricks-101 - ambientCG Bricks101
|
||||
hf-texture-bricks-075-a - ambientCG Bricks075A
|
||||
hf-texture-concrete - streaked channel cuts
|
||||
hf-texture-concrete-034 - ambientCG Concrete034
|
||||
hf-texture-concrete-047-a - ambientCG Concrete047A
|
||||
hf-texture-concrete-046 - ambientCG Concrete046
|
||||
hf-texture-concrete-042-a - ambientCG Concrete042A
|
||||
hf-texture-plaster-001 - ambientCG Plaster001
|
||||
hf-texture-painted-plaster-017 - ambientCG PaintedPlaster017
|
||||
|
||||
Stone:
|
||||
hf-texture-rock - sharp hard cutouts
|
||||
hf-texture-rock-063 - ambientCG Rock063
|
||||
hf-texture-rock-058 - ambientCG Rock058
|
||||
hf-texture-onyx - flowing marble veins
|
||||
hf-texture-marble-012 - ambientCG Marble012
|
||||
hf-texture-marble-016 - ambientCG Marble016
|
||||
hf-texture-travertine-009 - ambientCG Travertine009
|
||||
hf-texture-paving-stones-150 - ambientCG PavingStones150
|
||||
hf-texture-paving-stones-138 - ambientCG PavingStones138
|
||||
hf-texture-tiles-138 - ambientCG Tiles138
|
||||
|
||||
Ground / road:
|
||||
hf-texture-ground-103 - ambientCG Ground103
|
||||
hf-texture-ground-037 - ambientCG Ground037
|
||||
hf-texture-ground-054 - ambientCG Ground054
|
||||
hf-texture-ground-104 - ambientCG Ground104
|
||||
hf-texture-ground-068 - ambientCG Ground068
|
||||
hf-texture-ground-080 - ambientCG Ground080
|
||||
hf-texture-road-012-a - ambientCG Road012A
|
||||
hf-texture-road-008-a - ambientCG Road008A
|
||||
hf-texture-road-007 - ambientCG Road007
|
||||
hf-texture-road-013-a - ambientCG Road013A
|
||||
hf-texture-road-012-b - ambientCG Road012B
|
||||
hf-texture-road-009-c - ambientCG Road009C
|
||||
hf-texture-asphalt-031 - ambientCG Asphalt031
|
||||
|
||||
Wood:
|
||||
hf-texture-wood - horizontal grain slices
|
||||
hf-texture-wood-094 - ambientCG Wood094
|
||||
hf-texture-wood-092 - ambientCG Wood092
|
||||
hf-texture-wood-051 - ambientCG Wood051
|
||||
hf-texture-wood-066 - ambientCG Wood066
|
||||
hf-texture-wood-049 - ambientCG Wood049
|
||||
hf-texture-wood-058 - ambientCG Wood058
|
||||
hf-texture-wood-floor-051 - ambientCG WoodFloor051
|
||||
hf-texture-wood-floor-064 - ambientCG WoodFloor064
|
||||
hf-texture-wood-floor-070 - ambientCG WoodFloor070
|
||||
hf-texture-bark-014 - ambientCG Bark014
|
||||
|
||||
Metal:
|
||||
hf-texture-metal - rust and pit erosion
|
||||
hf-texture-metal-049-a - ambientCG Metal049A
|
||||
hf-texture-metal-055-a - ambientCG Metal055A
|
||||
hf-texture-metal-046-b - ambientCG Metal046B
|
||||
hf-texture-metal-061-b - ambientCG Metal061B
|
||||
hf-texture-metal-048-a - ambientCG Metal048A
|
||||
hf-texture-metal-032 - ambientCG Metal032
|
||||
hf-texture-metal-041-a - ambientCG Metal041A
|
||||
hf-texture-metal-038 - ambientCG Metal038
|
||||
hf-texture-diamond-plate-009 - ambientCG DiamondPlate009
|
||||
|
||||
Organic / soft:
|
||||
hf-texture-lava - smooth organic erosion
|
||||
hf-texture-grass-005 - ambientCG Grass005
|
||||
hf-texture-grass-001 - ambientCG Grass001
|
||||
hf-texture-grass-004 - ambientCG Grass004
|
||||
hf-texture-carpet - fine repeating weave
|
||||
hf-texture-fabric-083 - ambientCG Fabric083
|
||||
hf-texture-snow - soft patchy dissolve
|
||||
hf-texture-snow-015 - ambientCG Snow015
|
||||
hf-texture-leather-037 - ambientCG Leather037
|
||||
hf-texture-fabric-080 - ambientCG Fabric080
|
||||
|
||||
Custom properties:
|
||||
--mask-size cover CSS mask-size
|
||||
--mask-position center CSS mask-position
|
||||
--mask-contrast 1 filter contrast to sharpen/soften edges
|
||||
|
||||
Custom texture (set mask-image directly, not via custom property):
|
||||
<div class="hf-texture-text" style="-webkit-mask-image: url('my-texture.png'); mask-image: url('my-texture.png')">TEXT</div>
|
||||
|
||||
Drop shadow (follows masked contour, not bounding box):
|
||||
<div style="filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.3))">
|
||||
<div class="hf-texture-text hf-texture-lava">TEXT</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<style>
|
||||
.hf-texture-text {
|
||||
color: #fff;
|
||||
-webkit-mask-size: var(--mask-size, cover);
|
||||
mask-size: var(--mask-size, cover);
|
||||
-webkit-mask-position: var(--mask-position, center);
|
||||
mask-position: var(--mask-position, center);
|
||||
-webkit-mask-mode: luminance;
|
||||
mask-mode: luminance;
|
||||
filter: contrast(var(--mask-contrast, 1));
|
||||
}
|
||||
|
||||
.hf-texture-lava {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/lava.png");
|
||||
}
|
||||
.hf-texture-rock {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/rock.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/rock.png");
|
||||
}
|
||||
.hf-texture-concrete {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/concrete.png");
|
||||
}
|
||||
.hf-texture-brick {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/brick.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/brick.png");
|
||||
}
|
||||
.hf-texture-wood {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood.png");
|
||||
}
|
||||
.hf-texture-onyx {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/onyx.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/onyx.png");
|
||||
}
|
||||
.hf-texture-carpet {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/carpet.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/carpet.png");
|
||||
}
|
||||
.hf-texture-metal {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal.png");
|
||||
}
|
||||
.hf-texture-snow {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/snow.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/snow.png");
|
||||
}
|
||||
.hf-texture-bricks-104 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
|
||||
}
|
||||
.hf-texture-ground-103 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
|
||||
}
|
||||
.hf-texture-grass-005 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
|
||||
}
|
||||
.hf-texture-rock-063 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
|
||||
}
|
||||
.hf-texture-wood-094 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
|
||||
}
|
||||
.hf-texture-road-012-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
|
||||
}
|
||||
.hf-texture-wood-092 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
|
||||
}
|
||||
.hf-texture-metal-049-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
|
||||
}
|
||||
.hf-texture-wood-floor-051 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
|
||||
}
|
||||
.hf-texture-paving-stones-150 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
|
||||
}
|
||||
.hf-texture-road-008-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
|
||||
}
|
||||
.hf-texture-road-007 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-007.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/road-007.png");
|
||||
}
|
||||
.hf-texture-metal-055-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
|
||||
}
|
||||
.hf-texture-concrete-034 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
|
||||
}
|
||||
.hf-texture-grass-001 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
|
||||
}
|
||||
.hf-texture-wood-051 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
|
||||
}
|
||||
.hf-texture-asphalt-031 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
|
||||
}
|
||||
.hf-texture-wood-floor-064 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
|
||||
}
|
||||
.hf-texture-concrete-047-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
|
||||
}
|
||||
.hf-texture-metal-046-b {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
|
||||
}
|
||||
.hf-texture-grass-004 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
|
||||
}
|
||||
.hf-texture-marble-012 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
|
||||
}
|
||||
.hf-texture-ground-037 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
|
||||
}
|
||||
.hf-texture-tiles-138 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
|
||||
}
|
||||
.hf-texture-wood-066 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
|
||||
}
|
||||
.hf-texture-concrete-046 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
|
||||
}
|
||||
.hf-texture-wood-049 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
|
||||
}
|
||||
.hf-texture-road-013-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
|
||||
}
|
||||
.hf-texture-plaster-001 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
|
||||
}
|
||||
.hf-texture-snow-015 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
|
||||
}
|
||||
.hf-texture-road-012-b {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
|
||||
}
|
||||
.hf-texture-concrete-042-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
|
||||
}
|
||||
.hf-texture-bricks-102 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
|
||||
}
|
||||
.hf-texture-rock-058 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
|
||||
}
|
||||
.hf-texture-wood-floor-070 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
|
||||
}
|
||||
.hf-texture-bricks-101 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
|
||||
}
|
||||
.hf-texture-travertine-009 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
|
||||
}
|
||||
.hf-texture-ground-054 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
|
||||
}
|
||||
.hf-texture-wood-058 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
|
||||
}
|
||||
.hf-texture-ground-104 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
|
||||
}
|
||||
.hf-texture-painted-plaster-017 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
|
||||
}
|
||||
.hf-texture-paving-stones-138 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
|
||||
}
|
||||
.hf-texture-ground-068 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
|
||||
}
|
||||
.hf-texture-bricks-075-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
|
||||
}
|
||||
.hf-texture-ground-080 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
|
||||
}
|
||||
.hf-texture-road-009-c {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
|
||||
}
|
||||
.hf-texture-bark-014 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
|
||||
}
|
||||
.hf-texture-marble-016 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
|
||||
}
|
||||
.hf-texture-fabric-083 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
|
||||
}
|
||||
.hf-texture-metal-061-b {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
|
||||
}
|
||||
.hf-texture-metal-048-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
|
||||
}
|
||||
.hf-texture-metal-032 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
|
||||
}
|
||||
.hf-texture-metal-041-a {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
|
||||
}
|
||||
.hf-texture-metal-038 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
|
||||
}
|
||||
.hf-texture-diamond-plate-009 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
|
||||
}
|
||||
.hf-texture-leather-037 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
|
||||
}
|
||||
.hf-texture-fabric-080 {
|
||||
-webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
|
||||
mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user