tuning | LiquidGlassLogoTuning | {} | Every tuning field below, passed as one object. It also takes logo, mark, ending and maxDpr. |
height | number | string | - | Height of the component. |
backgroundImage | string | - | Image URL drawn behind the animation. The plate turns see-through. |
backgroundX / backgroundY | number | 0 | Offsets as percentages of the frame. |
backgroundScale | number | 1 | Scale of the cover image, from 1 to 3. |
backgroundTint | string | '#000000' | Color of the overlay between the image and the logo. |
backgroundTintOpacity | number | 0 | Opacity of the overlay, from 0 to 1. |
text | string | 'music' | Text revealed by the expanding lens. Supports custom fonts and Unicode text. |
ending | 'logo' | 'wordmark' | 'logo' | Play the complete wordmark reveal or finish on the original logo alone. The glass disappears in both modes. |
logoSize | number | 256 | Glass tile edge in pixels. The logo, lens and wordmark shrink together to fit the container. |
logoScale | number | 0.72 | Logo width or height as a fraction of the plate edge. |
finalLogoScale | number | 1 | Resting logo scale. At 1, the logo holds its normal size while the glass fades. Applies to Logo only. |
tile | boolean | true | Lay the logo on a rounded icon plate. |
fontSize | number | 64 | Size of the wordmark. |
fontWeight | number | 850 | Weight of the wordmark font. |
letterSpacing | number | -0.01 | Tracking of the wordmark. |
markGap | number | 0.12 | Space between the mark and the wordmark. |
theme | 'dark' | 'light' | 'dark' | Light or dark page, plate and logo colors. Colors passed explicitly override the theme. |
logoRelief | number | 1 | Rounded shading on the recolored logo. At 0 the logo is flat in its color; at 1 it has full relief. Original colors are always flat. |
logoColor | string | '#ffffff' | Recolors the logo silhouette. Pass "original" to keep the image colors. |
textColor | string | '#e2e6ee' | Color of the wordmark and its mark. |
tileColor | string | '#060c18' | Dark surface beneath the logo lens. |
background | string | '#000000' | Container background. Use transparent to sit over your own surface. |
depth | number | 1.2 | Optical depth of the glass in tile edges. Deeper glass bends and magnifies the image further. |
dispersion | number | 1 | Separation between wavelengths at the glass bevels and wordmark edges. |
relief | number | 1 | Intensity of the inset glass back face, its separate refracted image and the split highlights in the lower-right corner. |
caustics | number | 1 | Light concentrated onto the artwork at the lens shoulder. |
highlights | number | 1 | Brightness of the glass contours and reflected studio lights. |
bloom | number | 0.55 | Soft light around the glass and bright artwork edges. Keeps the white of the artwork from being overexposed. |
dropSize | number | 0.32 | Initial size of the expanding wordmark lens, relative to the tile edge. |
dropStrength | number | 1 | Curvature of the optical surface: stronger lenses pull the image further into their edges. |
echoTint | number | 0.5 | How much the faint line just outside the rim takes the plate color. At 0 it keeps its cool blue glint; at 1 it matches the plate and stays quiet on dark pages. |
innerWallFocus | number | 0 | At 0 the inner glass wall is drawn whole. At 1 it keeps to bright arcs at the upper-left and lower-right corners, which reads cleaner on a light theme. |
decay | number | 1.4 | Time for the secondary lens reflections to fade. |
speed | number | 1 | Playback rate of the glass sequence. At 1, the logo reveal lasts 1.8 seconds; the optional wordmark sequence lasts 3.3 seconds. |
loop | boolean | false | Restart after the finished artwork has held for Loop delay. |
loopDelay | number | 1.6 | Seconds the finished artwork holds before the sequence restarts. |
paused | boolean | false | Hold the current frame. |