Glass Morphic Maker concept for iOS using Axway Titanium

index.js

const win = Ti.UI.createWindow({
    backgroundImage: '/images/background_bubles.png',
    backgroundRepeat: false,
});

const lbTitle = Ti.UI.createLabel({
    color: '#7C34C6',
    font: {
        fontSize: 32,
    },
    shadowColor: '#D899FF',
    shadowOffset: {
        x: 2,
        y: 2,
    },
    shadowRadius: 3,
    text: 'Glass Morphic Maker',
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
    top: 30,
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
});

const vContainer = Ti.UI.createView({
    borderColor: 'rgba(211, 190, 241, 0.91)',
    borderRadius: 10,
    top: 100,
    width: 300,
    height: 300,
});

const blur = Ti.UI.iOS.createBlurView({
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    opacity: 0.7,
    effect: Ti.UI.iOS.BLUR_EFFECT_STYLE_LIGHT,
});
vContainer.add(blur);

const tabs = Ti.UI.iOS.createTabbedBar({
    labels: ['Extra light', 'Light', 'Dark'],
    index: 1,
    bottom: 100,
});

// Available blur effects
const effects = [
    Ti.UI.iOS.BLUR_EFFECT_STYLE_EXTRA_LIGHT,
    Ti.UI.iOS.BLUR_EFFECT_STYLE_LIGHT,
    Ti.UI.iOS.BLUR_EFFECT_STYLE_DARK,
];

tabs.addEventListener('click', function (e) {
    blur.effect = effects[e.index];
});

const slider = Ti.UI.createSlider({
    bottom: 20,
    min: 0,
    max: 1,
    width: Ti.UI.FILL,
    value: 0.5,
});

const lbSlider = Ti.UI.createLabel({
    text: `Opacity: ${slider.value}`,
    width: Ti.UI.FILL,
    bottom: 60,
    left: 0,
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});

slider.addEventListener('change', function (e) {
    valueRounded = Math.round(e.value * 1000) / 1000;
    lbSlider.text = String.format('Opacity: %3.3f', valueRounded);
    blur.opacity = valueRounded;
    console.log(`Opacity: ${valueRounded}`);
});

win.add(lbTitle);
win.add(tabs);
win.add(vContainer);
win.add(slider);
win.add(lbSlider);
win.open();