UI-UX-skill/test-premium-example.html at main · REX-codebase/UI-UX-skill · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>God-Tier Premium Example</title>
    <style>
        :root {
            --color-primary: oklch(40% 0.2 30);
            --color-secondary: oklch(60% 0.15 140);
            --color-background: oklch(10% 0.02 0);
            --color-accent: oklch(70% 0.25 300);
        }

        @font-face {
            font-family: 'Instrument Sans';
            src: url('https://fonts.gstatic.com/s/instrumentsans/v1/8QIRdiDaj51NXz3yH96x.woff2') format('woff2');
        }

        body {
            font-family: 'Instrument Sans', sans-serif;
            background-color: var(--color-background);
            color: var(--color-secondary);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            clip-path: polygon(14% 0, 72% 0, 88% 90%, 0 95%);
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            animation: morph 8s ease-in-out infinite;
        }

        @keyframes morph {
            0%, 100% {
                border-radius: 0% 0% 40% 10%;
                clip-path: polygon(14% 0, 72% 0, 88% 90%, 0 95%);
            }
            50% {
                border-radius: 10% 40% 0% 60%;
                clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
            }
        }

        .content {
            max-width: 65ch;
            padding: 2rem;
            line-height: 1.6;
        }

        .button {
            padding: 1rem 2rem;
            background: var(--color-accent);
            color: var(--color-background);
            border: none;
            border-radius: 61% 39% 34% 66% / 62% 31% 69% 38%;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-family: 'Instrument Sans', sans-serif;
        }

        .button:hover {
            transform: scale(1.05);
        }

        .button:active {
            transform: scale(0.95);
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--color-primary);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--color-accent);
        }
    </style>
</head>
<body>
    <div class="hero">
        <div class="content">
            <h1>God-Tier Design</h1>
            <p>This is a premium example using OKLCH colors, Instrument Sans font, organic clip-paths, and spring physics animations.</p>
            <button class="button" onclick="alert('Premium!')">Click Me</button>
        </div>
    </div>

    <div class="content">
        <h2>Why This is Premium</h2>
        <ul>
            <li>✅ OKLCH color space (not hex or RGB)</li>
            <li>✅ Instrument Sans (underrated font, not Inter/Roboto)</li>
            <li>✅ Organic clip-path animations</li>
            <li>✅ Spring physics easing (cubic-bezier(0.34, 1.56, 0.64, 1))</li>
            <li>✅ Asymmetric squircle border-radius</li>
            <li>✅ Custom scrollbar styling</li>
            <li>✅ 65ch max-width for readability</li>
            <li>✅ Real, empathetic copy (no Lorem Ipsum)</li>
        </ul>
    </div>

    <script>
        // Smooth scroll with Lenis (would be in a real implementation)
        // GSAP animations (would be in a real implementation)
        console.log('Premium example loaded');
    </script>
</body>
</html>